全局 loading

好久不见！

做项目中一直想用一个统一的 loading 状态控制全部的接口加载，但是一直不知道怎么处理，最近脑子突然灵光了一下想到了一个办法。

首先设置一个全局的 loading 状态，优先想到的就是 Pinia

然后因为页面会有很多接口会同时触发接口调用，但是接口响应时间是不一定的，所以采用计数法处理，代码如下

import { defineStore, acceptHMRUpdate } from "pinia";export const useLoadingStore = defineStore({id: "loading",state: () => ({count: 0}),getters: {/*** 控制 loading 状态* 因为接口都是异步调用，所以想了一个办法，利用 Count 计数来控制 loading* 取消请求 -1* 添加请求 +1* 请求报错 -1* 请求成功 -1* 请求失败 -1* 基本可以保证最后一定是 0* @returns {boolean}*/loading() {return this.count > 0;}},actions: {openLoading() {this.count + 1},closeLoading() {this.count - 1}}
});// 确保传递正确的 store 声明，本例中为 `useLoadingStore`
if (import.meta.hot) {import.meta.hot.accept(acceptHMRUpdate(useLoadingStore, import.meta.hot));
}

估计大佬也看出来了，虽然是个方法，但是很不严谨。因为简单的计数法，会有出现负数的情况，甚至两个接口同时响应的情况（当然这种很极端）

我询问了后端大佬，给我提供了一种互斥锁的概念可以融入其中，所以出现了现在的最好版本

先设计一个互斥锁

let lock = false;/*** 互斥锁 处理非常理超级极端的情况（忽略不计，顺便学习而已）* 开始锁* @returns {promise}*/
export const acquireLock = () => {return new Promise(resolve => {if (!lock) {lock = true;resolve();} else {setTimeout(resolve, 0);}});
};/*** 释放锁*/
export const releaseLock = () => {lock = false;
};

然后引入锁，并且计算的时候，引入 Math.max 方法

import { defineStore, acceptHMRUpdate } from "pinia";
import { acquireLock, releaseLock } from "@/utils/lock.js";export const useLoadingStore = defineStore({id: "loading",state: () => ({// loading: falsecount: 0}),getters: {/*** 控制 loading 状态* 因为接口都是异步调用，所以想了一个办法，利用 Count 计数来控制 loading* 取消请求 -1* 添加请求 +1* 请求报错 -1* 请求成功 -1* 请求失败 -1* 基本可以保证最后一定是 0* @returns {boolean}*/loading() {return this.count > 0;}},actions: {async openLoading() {// this.loading = true;await acquireLock();try {this.count = Math.max(1, this.count + 1); // 确保count不会变成负数} finally {releaseLock();}},async closeLoading() {// this.loading = false;await acquireLock();try {this.count = Math.max(0, this.count - 1); // 确保count不会变成负数} finally {releaseLock();}}}
});// 确保传递正确的 store 声明，本例中为 `useLoadingStore`
if (import.meta.hot) {import.meta.hot.accept(acceptHMRUpdate(useLoadingStore, import.meta.hot));
}

这样就可以

看下效果