全局 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));
}

这样就可以

看下效果


count 为几就说明有几个接口还未响应

今天就这样,又是小白学习的一天,加油!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/48898.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据结构——栈(链式结构)

一、栈的链式存储结构 如果一个栈存在频繁进栈和出栈操作,可以考虑链式结构。 栈的链式存储结构是指使用链表来实现栈这种数据结构。在链式存储结构中,栈的每个元素被封装成一个节点,节点之间通过指针相连,形成一个链表。栈顶元…

Linux下开放指定端口

比如需要开放82端口: #查询是否开通 firewall-cmd --query-port82/tcp#开放端口82 firewall-cmd --zonepublic --add-port82/tcp --permanent#重新加载防火墙 firewall-cmd --reload

java学习--代码块

package com.block.test01; class Main{public static void main(String[] args) {Block block new Block("你好,李焕英");new Block("你好",12,24);} } public class Block {String name;int begin_time;int end_time; //如果在调用构造器时都…

SwiftUI 5.0(iOS 17)滚动视图的滚动目标行为(Target Behavior)解惑和实战

概览 在 SwiftUI 的开发过程中我们常说:“屏幕不够,滚动来凑”。可见滚动视图对于超长内容的呈现有着多么秉轴持钧的重要作用。 这不,从 SwiftUI 5.0(iOS 17)开始苹果又为滚动视图增加了全新的功能。但是官方的示例可…

Linux----Mplayer音视频库的移植

想要播放视频音乐就得移植相关库到板子上 Mplayer移植需要依赖以下源文件:(从官网获取或者网上) 1、zlib-1.2.3.tar.gz :通用的内存空间的压缩库。 2、libpng-1.2.57.tar.gz :png格式图片的压缩或解压库 3、Jpegsrc.v9b.tar.gz : jpeg格式图片的压…

数据结构day3

一、思维导图 二、顺序表实现学生管理系统 //头文件 #ifndef TEST_H #define TEST_H #define MAX_SIZE 100//定义学生类型 typedef struct {char name[20]; //姓名int age; //年龄double score; //分数 }datatype;//定义班级类型 typedef struct {datatype student[MAX…

CDGA数据治理:突破卡点堵点,解决确权难、流通交易难问题

随着大数据时代的来临,数据已成为推动社会进步和经济发展的重要力量。然而,数据治理中的卡点堵点问题,特别是确权难、流通交易难,正成为制约数据要素市场健康发展的瓶颈。本文将探讨这些问题,并提出相应的解决方案。 确…

uniapp写登陆|微信小程序登录和微信h5登录使用同一个页面

文章目录 导文微信小程序登录先写一个样式代码实现详细解释: 微信h5登录先写一个样式代码实现1. checkWeChatCode()2. getWeChatCode()页面获取登陆后的code 导文 微信小程序登录怎么实现? 微信h5登录怎么实现? 用uniapp写同一个页面&#xf…

CloudCampus的三种部署模式

CloudCampus的三种部署模式 本地部署 客户购买控制器 自己运营 软件永久license sns ,将软件补丁、软件升级(含升级版本的新特性)、远程支持等打包在一起组成SnS年费 msp自建云部署 msp 购买控制器 msp运营 …

测试数据科学家深度学习基础知识的 45 个问题(以及解决方案)

测试数据科学家深度学习基础知识的 45 个问题(以及解决方案) 一、介绍 早在2009年, 深度学习还只是一个新兴领域。只有少数人认为这是一个富有成效的研究领域。今天,它被用于开发应用程序,这些应用程序在一段时间前被认为是困难或不可能做到的。 语音识别、图像识别、在数…

《云原生安全攻防》-- 容器攻击案例:镜像投毒与Fork炸弹

在本节课程中,我们将介绍两个比较有意思的容器攻击案例,镜像投毒与Fork炸弹。 在这个课程中,我们将学习以下内容: 镜像投毒:构建恶意镜像,诱导用户拉取镜像创建容器。 Fork炸弹:Fork炸弹的攻击…

sql常见50道查询练习题

sql常见50道查询练习题 1. 表创建1.1 表创建1.2 数据插入 2. 简单查询例题(3题)2.1 查询"李"姓老师的数量2.2 查询男生、女生人数2.3 查询名字中含有"风"字的学生信息 3. 日期相关例题(6题)3.1 查询各学生的年龄3.2 查询本周过生日的…

redis的学习(二):常见数据结构及其方法

简介 redis常见的数据结构和他们的常用方法 redis的数据结构 redis是一个key-value的nosql,key一般是字符串,value有很多的类型。 j基本类型: stringhashlistsetsortedSet 特殊类型: GEOBitMapHyperLog key的结构 可以使用…

MacOS M1 安装item2 并配置Zsh

文章目录 1 下载item22 美化item22.1 配置主题2.2 设置黑色的主题:2.3 配置显示状态栏 status bar 3 安装 Oh my zsh3.1 设置主题3.2 设置插件3.3 安装第三方插件1 下载仓库解压2 使用 git clone 一些常用插件以及其作用 参考 1 下载item2 MacOS自带终端&#xff0…

ontap simulator配置过程

一、下载模拟器 参考《Simulate_ONTAP_9-14-1_Installation_and_Setup_Guide.pdf》P4的指导,登录网站进行下载。 二、传入pve,并解压转换 # 解压 tar -xvf vsim-netapp-DOT9.14.1-cm_nodar.ova# 解压后的文件列表,其中ovf文件里定义了虚拟机…

WGS84经纬度坐标 GCJ02火星坐标 BD09百度坐标互相转换

WGS84经纬度坐标 GCJ02火星坐标 BD09百度坐标互相转换 背景:uniapp做的微信小程序,使用到了相机拍照并获取位置坐标信息;在腾讯地图上展示坐标点位置信息; 由于业务需要我们的PC端用的不是腾讯地图,需要使用WGS84坐标或…

《0基础》学习Python——第二十三讲__网络爬虫/<6>爬取哔哩哔哩视频

一、在B站上爬取一段视频(B站视频有音频和视频两个部分) 1、获取URL 注意:很多平台都有反爬取的机制,B站也不例外 首先按下F12找到第一条复制URL 2、UA伪装,下列图片中(注意代码书写格式) 3、Co…

ViT(Vision Transformer)网络结构详解

本文在transformer的基础上对ViT进行讲解,transformer相关部分可以看我另一篇博客(transformer中对于QKV的个人理解-CSDN博客)。 一、网络结构概览 上图展示了Vision Transformer (ViT) 的基本架构,我按照运行顺序分为三个板块进…

Rancher

文章目录 Rancher1. 安装和配置2. 服务部署和管理3. 容器自动化缩容和扩容 Rancher Rancher 是一个开源的企业级容器管理平台,旨在简化容器化应用的部署、管理和运维。它支持多种容器编排引擎,如 Kubernetes、Docker Swarm 等,并提供了统一的…

自动驾驶系统开发与调试:车路云一体化无人驾驶挑战赛参赛体验

点击蓝字 关注我们 在过去的几年里,自动驾驶技术在全球范围内吸引了大量关注。其潜力不仅在于提升行车安全,而且还可以改变我们的出行方式和城市规划,提高交通运输效率。国际汽车工程师学会(SAE)根据不同自动驾驶程度&…