Vue公共loading升級版(處理併發非同步差時響應)

来源:https://www.cnblogs.com/zyj-Blogs/archive/2023/11/20/17844283.html
-Advertisement-
Play Games

這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 效果 金幣從初始位置散開後逐個飛向指定位置,這是游戲中很常用的一個動畫,效果如下: 思路 這個效果中,分成兩個階段: 一定數量的金幣從一個起點散開 這些金幣逐一飛向終點 計算金幣的初始散開位置 生成圓周上的等分點 金幣散開的位置看似隨機, ...


公共loading是項目系統中很常見的場景,處理方式也不外乎三個步驟:
1.通過全局狀態管理定義狀態值(vuex、pinia等)。
2.在程式主入口監聽狀態值變化,從而展示/隱藏laoding動畫。
3.在請求和相應攔截器中變更狀態值。

第一二步驟處理大同小異,但在第三步中,網上很多博文分享的方法是:在請求攔截中展示loading,在響應攔截器中判斷收到成功響應時直接隱藏loading,這種方法看似可行但實際過程中卻有問題。
例如,假設在第0秒時同時向後臺發送了兩個非同步請求A和B,由於網路或處理邏輯不同,A請求0.5秒秒收到成功響應,B請求2秒才收到。那在第0.5秒,響應攔截器就會把loading狀態變更,結束loading動畫,但此時B請求還沒收到返回。如果用戶接下來的操作同時需要A和B請求的數據,提前結束動畫會讓用戶體檢變差。

解決思路:
定義一個全局對象來存儲每個介面的響應狀態,直到每個請求介面都收到響應才變更狀態,結束loading動畫。因為鍵名的唯一性,可以使用介面路徑(或唯一介面編號)作為鍵名。請求時添加一個鍵值對,響應時變更鍵值,同時遍歷對象狀態值進行判斷

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, //網路載入狀態,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) {  //判斷loading是否正在展示中
      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監聽狀態變化

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

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一條 SQL 查詢語句結構如下: SELECT DISTINCT <select_list> FROM <left_table> <join_type> JOIN <right_table> ON <join_condition> WHERE <where_condition> GROUP BY < ...
  • MPP MPP:Massively Parallel Processing, 即大規模並行處理. 一般用來指多個SQL資料庫節點搭建的數據倉庫系統. 執行查詢的時候, 查詢可以分散到多個SQL資料庫節點上執行, 然後彙總返回給用戶. Doris Doris 作為一款開源的 MPP 架構 OLAP 高 ...
  • 本文分享自華為雲社區《Navicat 基於 GaussDB 主備版的快速入門》,作者:Navicat_China。 Navicat Premium(16.2.8 Windows版或以上) 已支持對GaussDB 主備版的管理和開發功能。它不僅具備輕鬆、便捷的可視化數據查看和編輯功能,還提供強大的高階 ...
  • 一、來自MySQL官方的感謝 在 2023-10-25 MySQL 官方發佈的 8.2 版本 Release Notes 中,GreatSQL 社區核心開發者 Richard Dang 和 Hao Lu ,分別收到了來自 MySQL 官方的貢獻感謝,與Amazon、Facebook(Meta)、Te ...
  • DM8壓縮表 0、結論 行表(普通表)不支持壓縮。但是語法支持。建表之後,查詢到的占用空間會比普通表小一半。 經過測試,裝10萬數據(兩個欄位),壓縮的、未壓縮,占用空間一樣大。 列表(huge表)支持壓縮。可以壓縮表(就是壓縮所有列),也可以選擇壓縮列。但是建表的時候就要設置,否則建好表之後修改不 ...
  • Recyclerview中,提供了一個方法addItemDecoration給我們用於設置item的分割線 下麵提供幾個常見的分割線效果 註: 下麵的SizeUtils是AndroidUtilCode此庫里的工具類,需要添加依賴,也可以自行修改封裝的方法(主要是將dp單位轉為px) 以下代碼已封裝在 ...
  • npm 存在的問題 我們經常使用 npm 來管理 node 項目中的包,從 package.json 中讀取配置將依賴下載到本地,以保障項目的正常運行。 當項目數量多時,這樣的包管理方式會非常的占用電腦記憶體。由於每個項目都有屬於自己的依賴,每個項目都需要安裝,即使 npm 會對依賴進行緩存,但是每個 ...
  • 可以少去理解一些不必要的概念,而多去思考為什麼會有這樣的東西,它解決了什麼問題,或者它的運行機制是什麼? 1. React 中導出和導入 1.1 ES6 解析 ES6 的模塊化的基本規則或特點: 每一個模塊只載入一次, 每一個 JS 只執行一次, 如果下次再去載入同目錄下同文件,直接從記憶體中讀取。一 ...
一周排行
    -Advertisement-
    Play Games
  • 下麵是一個標準的IDistributedCache用例: public class SomeService(IDistributedCache cache) { public async Task<SomeInformation> GetSomeInformationAsync (string na ...
  • 這個庫提供了在啟動期間實例化已註冊的單例,而不是在首次使用它時實例化。 單例通常在首次使用時創建,這可能會導致響應傳入請求的延遲高於平時。在註冊時創建實例有助於防止第一次Request請求的SLA 以往我們要在註冊的時候實例單例可能會這樣寫: //註冊: services.AddSingleton< ...
  • 最近公司的很多項目都要改單點登錄了,不過大部分都還沒敲定,目前立刻要做的就只有一個比較老的項目 先改一個試試手,主要目標就是最短最快實現功能 首先因為要保留原登錄方式,所以頁面上的改動就是在原來登錄頁面下加一個SSO登錄入口 用超鏈接寫的入口,頁面改造後如下圖: 其中超鏈接的 href="Staff ...
  • Like運算符很好用,特別是它所提供的其中*、?這兩種通配符,在Windows文件系統和各類項目中運用非常廣泛。 但Like運算符僅在VB中支持,在C#中,如何實現呢? 以下是關於LikeString的四種實現方式,其中第四種為Regex正則表達式實現,且在.NET Standard 2.0及以上平... ...
  • 一:背景 1. 講故事 前些天有位朋友找到我,說他們的程式記憶體會偶發性暴漲,自己分析了下是非托管記憶體問題,讓我幫忙看下怎麼回事?哈哈,看到這個dump我還是非常有興趣的,居然還有這種游戲幣自助機類型的程式,下次去大玩家看看他們出幣的機器後端是不是C#寫的?由於dump是linux上的程式,剛好win ...
  • 前言 大家好,我是老馬。很高興遇到你。 我們為 java 開發者實現了 java 版本的 nginx https://github.com/houbb/nginx4j 如果你想知道 servlet 如何處理的,可以參考我的另一個項目: 手寫從零實現簡易版 tomcat minicat 手寫 ngin ...
  • 上一次的介紹,主要圍繞如何統一去捕獲異常,以及為每一種異常添加自己的Mapper實現,並且我們知道,當在ExceptionMapper中返回非200的Response,不支持application/json的響應類型,而是寫死的text/plain類型。 Filter為二方包異常手動捕獲 參考:ht ...
  • 大家好,我是R哥。 今天分享一個爽飛了的面試輔導 case: 這個杭州兄弟空窗期 1 個月+,面試了 6 家公司 0 Offer,不知道問題出在哪,難道是杭州的 IT 崩盤了麽? 報名面試輔導後,經過一個多月的輔導打磨,現在成功入職某上市公司,漲薪 30%+,955 工作制,不咋加班,還不捲。 其他 ...
  • 引入依賴 <!--Freemarker wls--> <dependency> <groupId>org.freemarker</groupId> <artifactId>freemarker</artifactId> <version>2.3.30</version> </dependency> ...
  • 你應如何運行程式 互動式命令模式 開始一個互動式會話 一般是在操作系統命令行下輸入python,且不帶任何參數 系統路徑 如果沒有設置系統的PATH環境變數來包括Python的安裝路徑,可能需要機器上Python可執行文件的完整路徑來代替python 運行的位置:代碼位置 不要輸入的內容:提示符和註 ...