Vue基於vuex和axios實現載入效果以及axios的安裝配置

本篇文章給大家帶來的內容是關於Vue基於vuex和axios攔截器實現loading效果及axios的安裝配置，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所協助。

準備

• 利用vue-cli腳手架建立項目

• 進入項目安裝vuex、axios（npm install vuex,npm install axios）

axios配置

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

main.js

//引入axiosimport Axios from 'axios'//修改原型鏈，全域使用axios,這樣之後可在每個組件的methods中調用$axios命令完成資料請求Vue.prototype.$axios=Axios

loading組件

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

npm install iviewmain.jsimport 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 同上面代碼

效果展示