vuex+axios+element-ui實現頁面請求loading操作示例
阿新 • • 發佈:2020-02-03
本文例項講述了vuex+axios+element-ui實現頁面請求loading操作。分享給大家供大家參考,具體如下:
前言
我們在平常寫專案的時候,發請求的時候肯定會習慣用一個 loading 遮罩層來防止使用者在沒拿到資料之前誤操作
如果是頁面同時只發送一個請求,那麼無論是在元件中或者是在 axios 外掛中進行請求和響應攔截都可以做到
但是,當一個頁面同時要傳送多個請求的時候,這麼做顯然就不行了
因為最先完成的請求會把所有請求的 loading 都給關閉
舉個例子,第一個請求的響應時間為 3s ,第二個請求的響應時間為 1s ,兩個同時請求的時候,loading 會開始
但是當 1s 後第二個請求完成後,會直接關閉 loading,但是此時第一個請求還沒完成,所有這樣肯定是不行的
今天就用這篇文章來介紹下我在專案中是怎麼應對這種情況的
一、用到的東西
- element-ui 的 loading
- vuex 的狀態管理
- axios 的請求攔截和響應攔截
二、實現
其實這個思路很簡單,就是通過 vuex 來管理請求的個數,假如用 apiCount 這個變數來代表請求的個數,每次請求的時候開啟 loading 並且 apiCount 加一,每次響應完成或者失敗的時候都讓 apiCount 減一,並且檢測 apiCount 變數的值,當為 apiCount=0 的時候,就關閉 loading 就可以了,程式碼如下:
store.js 程式碼(用來管理 vuex)
import Vue from "vue"; import Vuex from "vuex"; import { Loading } from "element-ui"; Vue.use(Vuex); const state = { //請求計數 apiCount: 0,//loading例項 loadingInstance: null,}; const mutations = { /* 開啟Loading */ startLoading(state,msg) { state.loadingInstance = Loading.service({ lock: true,text: msg ? msg : "載入中...",background: "rgba(0,0.7)" }); },/* 關閉loading */ closeLoading(state) { state.loadingInstance.close(); },/* 更新請求執行緒池 */ updateApiCount(state,handle) { if (handle == "add") { state.apiCount++; this.commit("startLoading"); } else { state.apiCount--; if (state.apiCount <= 0) { this.commit("closeLoading"); } } } }; const store = new Vuex.Store({ state,mutations }); export default store;
request.js 程式碼(封裝axios 的檔案)
import axios from "axios"; import { Message } from "element-ui"; import store from "../store/index"; import router from "../router/index"; const service = axios.create({ baseURL: process.env.VUE_APP_BASE_URL,timeout: 0 }); service.interceptors.request.use( config => { store.commit("updateApiCount","add"); return config; },error => { store.commit("updateApiCount","sub"); Promise.reject(error); } ); service.interceptors.response.use( response => { store.commit("updateApiCount","sub"); return response.data; },"sub"); return Promise.reject(error); } ); export default service;
好了,這樣就做到了請求的時候自動開啟 loading,所有的請求結束才會關閉 loading 了,無論同時多少個請求都可以
希望本文所述對大家vue.js程式設計有所幫助。