前言
我們在平常寫項目的時候,發請求的時候肯定會習慣用一個 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, 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;
},
error => {
store.commit("updateApiCount", "sub");
return Promise.reject(error);
}
);
export default service;
好了,這樣就做到了請求的時候自動打開 loading,所有的請求結束纔會關閉 loading 了,無論同時多少個請求都可以
有問題歡迎留言
本文地址:https://blog.csdn.net/liyunkun888/article/details/102820457