Vue公共loading升級版解決思路(處理并發(fā)異步差時響應)
公共loading是項目系統(tǒng)中很常見的場景，處理方式也不外乎三個步驟：
1.通過全局狀態(tài)管理定義狀態(tài)值（vuex、pinia等）。
2.在程序主入口監(jiān)聽狀態(tài)值變化，從而展示/隱藏laoding動畫。
3.在請求和相應攔截器中變更狀態(tài)值。
第一二步驟處理大同小異，但在第三步中，網(wǎng)上很多博文分享的方法是:在請求攔截中展示loading,在響應攔截器中判斷收到成功響應時直接隱藏loading，這種方法看似可行但實際過程中卻有問題。例如，假設在第0秒時同時向后臺發(fā)送了兩個異步請求A和B，由于網(wǎng)絡或處理邏輯不同，A請求0.5秒秒收到成功響應，B請求2秒才收到。那在第0.5秒，響應攔截器就會把loading狀態(tài)變更，結束loading動畫，但此時B請求還沒收到返回。如果用戶接下來的操作同時需要A和B請求的數(shù)據(jù)，提前結束動畫會讓用戶體檢變差。
解決思路：
定義一個全局對象來存儲每個接口的響應狀態(tài)，直到每個請求接口都收到響應才變更狀態(tài)，結束loading動畫。因為鍵名的唯一性，可以使用接口路徑（或唯一接口編號）作為鍵名。請求時添加一個鍵值對，響應時變更鍵值，同時遍歷對象狀態(tài)值進行判斷
let apiStatusList ={
'/api/a':true,//true請求中
'/api/b':false //false請求完成
}具體操作如下（以vue3的pinia為例）：
定義一個loading.js
import { defineStore } from 'pinia';
export const useLoadStore = defineStore('storeLoading', {
state: () => {
return {
apiStatusList:{},
loading:false, //網(wǎng)絡加載狀態(tài)，true加載中
};
},
actions: {
updateLoadingState(value){
this.loading = value
},
setApiStatusList(value){
this.apiList = value;
}
}
});
攔截器處理：
import axios from 'axios';
import { useLoadStore } from '../stores/loading';
const request = axios.create();
//請求攔截
request.interceptors.request.use(
(config) => {
//公共loading
const loadStore = useLoadStore();
let statusList = { ...loadStore.apiStatusList };
statusList[config.url] = true; //接口賦值為請求中
loadStore.setApiStatusList(statusList);
if (!loadStore.loading) { //判斷l(xiāng)oading是否正在展示中
loadStore.updateLoadingState(true);
}
return config;
},
(error) => {
return Promise.reject(error);
}
)
//響應攔截
request.interceptors.response.use(
(response) => {
const loadStore = useLoadStore();
let statusList = { ...loadStore.apiStatusList };
statusList[response.config.url] = false; ////接口賦值為請求完成
if (!Object.values(statusList).includes(true)) { //遍歷對象，判斷接口是否全部返回
if (loadStore.loading) {
loadStore.updateLoadingState(false);
loadStore.setApiStatusList({});
}
} else {
loadStore.setApiStatusList(statusList);
}
}，
(error) => {//有接口報錯，重置loading
const loadStore = useLoadStore();
if (loadStore.loading) {
loadStore.updateLoadingState(false);
loadStore.setApiStatusList({});
}
}
）App.vue監(jiān)聽狀態(tài)變化
//監(jiān)聽store狀態(tài)值時需要傳入function
watch(()=>loadStore.loading,(newValue, oldValue)=>{
if(newValue){
showLoadingToast({
duration: 0,
forbidClick: true,
});
}else{
closeToast();
}
})到此這篇關于Vue公共loading升級版（處理并發(fā)異步差時響應）的文章就介紹到這了,更多相關Vue公共loading升級版內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Vue3集成json-editor-vue3的代碼實現(xiàn)
這篇文章主要介紹了Vue3集成json-editor-vue3的代碼實現(xiàn),本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-11-11
vue路由導航守衛(wèi)和請求攔截以及基于node的token認證的方法
這篇文章主要介紹了vue路由導航守衛(wèi)和請求攔截以及基于node的token認證的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
使用vue-router切換頁面時實現(xiàn)設置過渡動畫
今天小編就為大家分享一篇使用vue-router切換頁面時實現(xiàn)設置過渡動畫。具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
Vue0.1的過濾代碼如何添加到Vue2.0直接使用，這篇文章主要介紹了過濾代碼添加到Vue2.0用的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
vue使用lottie-web實現(xiàn)web動畫效果
在web端,lottie-web庫可以解析導出的動畫json文件,并將其以svg或者canvas的方式將動畫繪制在我們的頁面上,這篇文章主要介紹了vue使用lottie-web實現(xiàn)web動畫,需要的朋友可以參考下2024-06-06
這篇文章主要給大家介紹了關于vue上傳圖片文件的相關資料，介紹了利用原始input標簽form表單上傳、elementui自帶的el-upload上傳以及elementui實現(xiàn)一次性上傳多張圖片等方法，需要的朋友可以參考下2021-05-05
本文主要介紹了vue el-table實現(xiàn)遞歸嵌套的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
這篇文章主要介紹了VueJS頁面渲染之后如何調(diào)用函數(shù)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
Vue子組件props從父組件接收數(shù)據(jù)并存入data
這篇文章主要介紹了Vue子組件props從父組件接收數(shù)據(jù)并存入data的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
這篇文章主要介紹了vant框架van-cell插槽無法換行問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01