成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

在vue項目中的axios使用配置記錄

Magicer / 1123人閱讀

摘要：默認項目中已經(jīng)安裝，基于開發(fā)，主要記錄配置的相關(guān)。響應(yīng)時間配置配置請求頭靜態(tài)資源配置接口地址傳參序列化添加請求攔截器數(shù)據(jù)加載中，請稍后請求錯誤返回狀態(tài)判斷添加響應(yīng)攔截器請求失敗，請稍后再試發(fā)送請求配置組件內(nèi)部的調(diào)用

默認vue項目中已經(jīng)安裝axios，基于element-ui開發(fā)，主要記錄配置的相關(guān)。

axiosConfig.js
import Vue from "vue"
import axios from "axios"
import qs from "qs"
import { Message, Loading } from "element-ui"
// 響應(yīng)時間
axios.defaults.timeout = 5 * 1000
// 配置cookie
// axios.defaults.withCredentials = true
// 配置請求頭
axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded;charset=UTF-8"
// 靜態(tài)資源
Vue.prototype.$static = ""

// 配置接口地址
axios.defaults.baseURL = ""
var loadingInstance
// POST傳參序列化(添加請求攔截器)
axios.interceptors.request.use(
  config => {
    loadingInstance = Loading.service({
      lock: true,
      text: "數(shù)據(jù)加載中，請稍后...",
      spinner: "el-icon-loading",
      background: "rgba(0, 0, 0, 0.7)"
    })
    if (config.method === "post") {
      config.data = qs.stringify(config.data)
    }
    return config
  },
  err => {
    loadingInstance.close()
    Message.error("請求錯誤")
    return Promise.reject(err)
  }
)
// 返回狀態(tài)判斷(添加響應(yīng)攔截器)
axios.interceptors.response.use(
  res => {
    if (res.data.code === 200) {
      loadingInstance.close()
      return res
    } else {
      loadingInstance.close()
      Message.error(res.data.msg)
    }
  },
  err => {
    loadingInstance.close()
    Message.error("請求失敗，請稍后再試")
    return Promise.reject(err)
  }
)
// 發(fā)送請求
export function fetchPost (url, params) {
  return new Promise((resolve, reject) => {
    axios
      .post(url, params)
      .then(
        res => {
          resolve(res.data)
        },
        err => {
          reject(err.data)
        }
      )
      .catch(err => {
        reject(err.data)
      })
  })
}
export function fetchGet (url, params) {
  return new Promise((resolve, reject) => {
    axios
      .get(url, {
        params: params
      })
      .then(res => {
        resolve(res.data)
      })
      .catch(err => {
        reject(err.data)
      })
  })
}
main.js 配置
import { fetchGet, fetchPost} from "./api/axiosConfig"
Vue.prototype.$get = fetchGet
Vue.prototype.$post = fetchPost
組件內(nèi)部的調(diào)用
getData () {
  let params = {
    userId: this.userId
  }
  this.$get("/xxx", params).then(res => {
    this.listsData = res.data
  }).catch(() => {
  })
}

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/93114.html

相關(guān)文章

  • Vue入坑筆記

    摘要：近段時間常使用開發(fā)，寫點記錄，避免時間久之忘了。安裝教程查看是否已安裝，在中輸入若已安裝則輸出版本號。繼承報錯可能是文件路徑問題。當(dāng)和繼承的不同時在文件夾內(nèi)外的話，會出現(xiàn)該錯誤。 近段時間常使用vue-cli開發(fā)，寫點記錄，避免時間久之忘了。 環(huán)境 1. nodejs　　vue-cli開發(fā)基于nodejs環(huán)境，確保開發(fā)的環(huán)境中已安裝了nodejs。　　安裝教程 https://www....

    superw 評論0 收藏0

  • node-vue前后端分離記錄

    摘要：用于列表渲染，可以循環(huán)遍歷數(shù)組和對象注意目前指的是的迭代事件綁定，簡寫相當(dāng)于與相比，避免了閃現(xiàn)的問題。 node vue項目開發(fā) 看了近一周的vue開發(fā)，有諸多感觸，我之前接觸過react、angular所以特別想學(xué)學(xué)久仰大名的vue。學(xué)習(xí)半天以后發(fā)現(xiàn)，接觸到的東西多了，學(xué)習(xí)起來就是容易很多，vue的指令我能個聯(lián)想到angular的指令，vue組件化設(shè)計類似于react的組件化設(shè)計，包...

    lowett 評論0 收藏0

  • vue+node+mysql搭建個人博客（一）

    摘要：其中用來完成請求，將添加的原型上后就不需要再在每個需要使用它的頁面引入了每個頁面都相當(dāng)于一個組件，文件以結(jié)尾，第一次啟動成功時看到的頁面就是組件，路徑。 學(xué)習(xí)筆記...在線地址：cl8023.com github 數(shù)據(jù)庫已改為mongodb 快速搭建 node 后端服務(wù)Github-quick-node-server 準備工作 安裝node，這是必須的 新版node自帶npm...

    peixn 評論0 收藏0

  • 基于vue項目的知識總結(jié)

    摘要：前言用有一段時間了，從用搭建項目一步步配置，到之后的研究動效這些，一直想寫些東西記錄一下做個總結(jié)，剛好趁著有空就整理一下。結(jié)語有新的知識點會更新到知識體系中，總結(jié)和心得體會會單獨寫文章詳述，努力填坑 前言 用vue有一段時間了，從用vue-cli搭建項目、一步步配置axios、vuex、vue-router，到之后的研究canvas、動效這些，一直想寫些東西記錄一下、做個總結(jié)，剛好趁著...

    tianlai 評論0 收藏0

  • vue 項目總結(jié)一文件夾結(jié)構(gòu)配置

    摘要：文件夾結(jié)構(gòu)文件夾里的文件夾設(shè)置是靈活的，可以根據(jù)自己的習(xí)慣進行，不必雷同。對文件夾配置的總結(jié)先到此為止，下一篇文章會是對文件夾里具體文件的配置和例子總結(jié)，有需要的可以去看看。 之前一段時間都在使用 vue 開發(fā)后臺管理系統(tǒng)，在摸索的過程中對 vue 本身和模塊化、規(guī)范化開發(fā)有了更深的認知，現(xiàn)在記錄下來，希望對其他需要開發(fā)項目的人有幫助。 項目配置 首先，在確定好使用的框架和組件庫后，先...

    spacewander 評論0 收藏0

發(fā)表評論

0條評論

Magicer

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<