溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
準備
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 同上面代碼
效果展示
總結
以上所述是小編給大家介紹的Vue基于vuex、axios攔截器實現loading效果及axios的安裝配置，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
