Vue基於vuex、axios攔截器實現loading效果及axios的安裝配置

準備

• 利用vue-cli腳手架建立項目
• 進入項目安裝vuex、axios（npm install vuex,npm install axios）

axios配置

項目中安裝axios模塊（npm install axios）完成後，進行如下配置：

main.js

//引入axios
import Axios from 'axios'

//修改原型鏈，全局使用axios,這樣以後可在每一個組件的methods中調用$axios命令完成數據請求
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寫成一個組件loading.vue

Vuex state狀態設置控制loading的顯隱

store.js(Vuex)

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

在state中定義isShow屬性，默認false隱藏

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

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

組件使用axios請求數據

<button @click="getData">請求數據</button>

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

我這裏使用一個按鈕進行觸發事件，利用get請求網上隨便找的一個api接口,.then中返回請求的整個結果（不單單包括數據）

Axios攔截器配置

main.js

//定義一個請求攔截器
Axios.interceptors.request.use(function(config){
  store.state.isShow=true; //在請求發出以前進行一些操做
  return config
})
//定義一個響應攔截器
Axios.interceptors.response.use(function(config){
  store.state.isShow=false;//在這裏對返回的數據進行處理
  return config
})

分別定義一個請求攔截器（請求開始時執行某些操做）、響應攔截器（接受到數據後執行某些操做），之間分別設置攔截時執行的操做，改變state內isShow的布爾值從而控制loading組件在觸發請求數據開始時顯示loading，返回數據時隱藏loading
特別注意：這裏有一個語法坑（我但是來來回回踩了很多次）main.js中調取、操做vuex state中的數據不一樣於組件中的this.$store.state，而是直接store.state 同上面代碼

效果展現

本文做者：茅野zhy 博客連接：www.zhysama.xyz 版權聲明： 該文章由博主編輯 , 轉發請註明出處謝謝！