快捷導(dǎo)航

Vue公共loading升級(jí)版解決思路(處理并發(fā)異步差時(shí)響應(yīng))

更新時(shí)間：2023年11月21日 08:59:59 作者：波特卡斯D

這篇文章主要介紹了Vue公共loading升級(jí)版（處理并發(fā)異步差時(shí)響應(yīng)）,解決思路是通過定義一個(gè)全局對(duì)象來存儲(chǔ)每個(gè)接口的響應(yīng)狀態(tài)，直到每個(gè)請(qǐng)求接口都收到響應(yīng)才變更狀態(tài)，結(jié)束loading動(dòng)畫，需要的朋友可以參考下

公共loading是項(xiàng)目系統(tǒng)中很常見的場(chǎng)景，處理方式也不外乎三個(gè)步驟：
1.通過全局狀態(tài)管理定義狀態(tài)值（vuex、pinia等）。
2.在程序主入口監(jiān)聽狀態(tài)值變化，從而展示/隱藏laoding動(dòng)畫。
3.在請(qǐng)求和相應(yīng)攔截器中變更狀態(tài)值。

第一二步驟處理大同小異，但在第三步中，網(wǎng)上很多博文分享的方法是:在請(qǐng)求攔截中展示loading,在響應(yīng)攔截器中判斷收到成功響應(yīng)時(shí)直接隱藏loading，這種方法看似可行但實(shí)際過程中卻有問題。例如，假設(shè)在第0秒時(shí)同時(shí)向后臺(tái)發(fā)送了兩個(gè)異步請(qǐng)求A和B，由于網(wǎng)絡(luò)或處理邏輯不同，A請(qǐng)求0.5秒秒收到成功響應(yīng)，B請(qǐng)求2秒才收到。那在第0.5秒，響應(yīng)攔截器就會(huì)把loading狀態(tài)變更，結(jié)束loading動(dòng)畫，但此時(shí)B請(qǐng)求還沒收到返回。如果用戶接下來的操作同時(shí)需要A和B請(qǐng)求的數(shù)據(jù)，提前結(jié)束動(dòng)畫會(huì)讓用戶體檢變差。

解決思路：
定義一個(gè)全局對(duì)象來存儲(chǔ)每個(gè)接口的響應(yīng)狀態(tài)，直到每個(gè)請(qǐng)求接口都收到響應(yīng)才變更狀態(tài)，結(jié)束loading動(dòng)畫。因?yàn)殒I名的唯一性，可以使用接口路徑（或唯一接口編號(hào)）作為鍵名。請(qǐng)求時(shí)添加一個(gè)鍵值對(duì)，響應(yīng)時(shí)變更鍵值，同時(shí)遍歷對(duì)象狀態(tài)值進(jìn)行判斷

let apiStatusList ={
  '/api/a':true,//true請(qǐng)求中
  '/api/b':false //false請(qǐng)求完成
}

具體操作如下（以vue3的pinia為例）：
定義一個(gè)loading.js

import { defineStore } from 'pinia';
export const useLoadStore = defineStore('storeLoading', {
  state: () => {
    return {
      apiStatusList:{},
      loading:false, //網(wǎng)絡(luò)加載狀態(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();
//請(qǐng)求攔截
request.interceptors.request.use(
  (config) => {
    //公共loading
    const loadStore = useLoadStore();
    let statusList = { ...loadStore.apiStatusList };
    statusList[config.url] = true; //接口賦值為請(qǐng)求中
    loadStore.setApiStatusList(statusList);
    if (!loadStore.loading) {  //判斷l(xiāng)oading是否正在展示中
      loadStore.updateLoadingState(true);
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
)
//響應(yīng)攔截
request.interceptors.response.use(
  (response) => {
    const loadStore = useLoadStore();
    let statusList = { ...loadStore.apiStatusList };
    statusList[response.config.url] = false;  ////接口賦值為請(qǐng)求完成
    if (!Object.values(statusList).includes(true)) { //遍歷對(duì)象，判斷接口是否全部返回
      if (loadStore.loading) {
        loadStore.updateLoadingState(false);
        loadStore.setApiStatusList({});
      }
    } else {
      loadStore.setApiStatusList(statusList);
    }
  }，
  (error) => {//有接口報(bào)錯(cuò)，重置loading
    const loadStore = useLoadStore();
    if (loadStore.loading) {
      loadStore.updateLoadingState(false);
      loadStore.setApiStatusList({});
    }
  }
）

App.vue監(jiān)聽狀態(tài)變化

//監(jiān)聽store狀態(tài)值時(shí)需要傳入function
watch(()=>loadStore.loading,(newValue, oldValue)=>{
  if(newValue){
    showLoadingToast({
      duration: 0,
      forbidClick: true,
    });
  }else{
    closeToast();
  }
})

到此這篇關(guān)于Vue公共loading升級(jí)版（處理并發(fā)異步差時(shí)響應(yīng)）的文章就介紹到這了,更多相關(guān)Vue公共loading升級(jí)版內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: