準(zhǔn)備

創(chuàng)新互聯(lián)建站專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站制作、成都做網(wǎng)站、外貿(mào)營銷網(wǎng)站建設(shè)、東區(qū)網(wǎng)絡(luò)推廣、微信小程序開發(fā)、東區(qū)網(wǎng)絡(luò)營銷、東區(qū)企業(yè)策劃、東區(qū)品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)建站為所有大學(xué)生創(chuàng)業(yè)者提供東區(qū)建站搭建服務(wù)，24小時(shí)服務(wù)熱線：13518219792，官方網(wǎng)址：www.cdcxhl.com

• 利用vue-cli腳手架創(chuàng)建項(xiàng)目
• 進(jìn)入項(xiàng)目安裝vuex、axios（npm install vuex,npm install axios）

axios配置

項(xiàng)目中安裝axios模塊（npm install axios）完成后，進(jìn)行以下配置：

main.js

//引入axios
import Axios from 'axios'
//修改原型鏈，全局使用axios,這樣之后可在每個(gè)組件的methods中調(diào)用$axios命令完成數(shù)據(jù)請求
Vue.prototype.$axios=Axios

loading組件

我這里就選擇使用iview提供的loading組件，

npm install iview

main.js
import iView from 'iview';
import 'iview/dist/styles/iview.css';
Vue.use(iView);

安裝引入后，將loading寫成一個(gè)組件loading.vue

Vuex state狀態(tài)設(shè)置控制loading的顯隱

store.js(Vuex)

export const store = new Vuex.Store({
  state:{
    isShow:false
  }
})

在state中定義isShow屬性，默認(rèn)false隱藏

v-if="this.$store.state.isShow"

為loading組件添加v-if綁定state中的isShow

組件使用axios請求數(shù)據(jù)

請求數(shù)據(jù)
methods:{
    getData(){
      this.$axios.get('https://www.apiopen.top/journalismApi')
      .then(res=>{
        console.log(res)//返回請求的結(jié)果
      })
      .catch(err=>{
        console.log(err)
      })
    }
  }

我這里使用一個(gè)按鈕進(jìn)行觸發(fā)事件，利用get請求網(wǎng)上隨便找的一個(gè)api接口,.then中返回請求的整個(gè)結(jié)果（不僅僅包括數(shù)據(jù)）

Axios攔截器配置

main.js

//定義一個(gè)請求攔截器
Axios.interceptors.request.use(function(config){
 store.state.isShow=true; //在請求發(fā)出之前進(jìn)行一些操作
 return config
})
//定義一個(gè)響應(yīng)攔截器
Axios.interceptors.response.use(function(config){
 store.state.isShow=false;//在這里對返回的數(shù)據(jù)進(jìn)行處理
 return config
})

分別定義一個(gè)請求攔截器（請求開始時(shí)執(zhí)行某些操作）、響應(yīng)攔截器（接受到數(shù)據(jù)后執(zhí)行某些操作），之間分別設(shè)置攔截時(shí)執(zhí)行的操作，改變state內(nèi)isShow的布爾值從而控制loading組件在觸發(fā)請求數(shù)據(jù)開始時(shí)顯示loading，返回?cái)?shù)據(jù)時(shí)隱藏loading

特別注意：這里有一個(gè)語法坑（我可是來來回回踩了不少次）main.js中調(diào)取、操作vuex state中的數(shù)據(jù)不同于組件中的this.$store.state，而是直接store.state 同上面代碼

效果展示

總結(jié)

以上所述是小編給大家介紹的Vue基于vuex、axios攔截器實(shí)現(xiàn)loading效果及axios的安裝配置，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！