Vue公共loading升级版(处理并发异步差时响应)

公共loading是项目系统中很常见的场景,处理方式也不外乎三个步骤:

  1. 通过全局状态管理定义状态值(vuex、pinia等)。

  1. 在程序主入口监听状态值变化,从而展示/隐藏laoding动画。

  1. 在请求和相应拦截器中变更状态值。

第一二步骤处理大同小异,但在第三步中,网上很多博文分享的方法是:在请求拦截中展示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) => {//公共loadingconst 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) => {//有接口报错,重置loadingconst 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();}
})

文章转载自:波特卡斯D

原文链接:https://www.cnblogs.com/zyj-Blogs/p/17844283.html

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

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

相关文章

svn文件不显示红色感叹号

如下图所示,受svn版本控制的文件不显示下图中红色感叹号和绿色对号时, 可以试着如下操作 空白处单击右键,具体操作如下图

Rust可空类型Option

文章目录 Option基础模式匹配unwrap Rust基础教程:初步⚙所有权⚙结构体和枚举类⚙函数进阶⚙泛型和特征⚙并发和线程通信⚙cargo包管理 Rust进阶教程:用宏实现参数可变的函数⚙类函数宏 Option基础 在一些编程语言中,允许存在空值&#xf…

docker的基本使用以及使用Docker 运行D435i

1.一些基本的指令 1.1 容器 要查看正在运行的容器&#xff1a; sudo docker ps 查看所有的容器&#xff08;包括停止状态的容器&#xff09; sudo docker ps -a 重新命名容器 sudo docker rename <old_name> <new_name> <old_name> 替换为你的容器名称…

用 HLS 实现 UART

用 HLS 实现 UART 介绍 UART 是一种旧的串行通信机制&#xff0c;但仍在很多平台中使用。它在 HDL 语言中的实现并不棘手&#xff0c;可以被视为本科生的作业。在这里&#xff0c;我将通过这个例子来展示在 HLS 中实现它是多么容易和有趣。 因此&#xff0c;从概念上讲&#xf…

内存池的面试整理

文章思路来源 如何实现无锁申请&#xff1f; 每个线程申请自己的TreadCacheTLS对象&#xff0c;来管理自己的freeList数组。小内存的大小&#xff1f; 0-256K&#xff0c;并且对申请到的内存进行字节对齐&#xff0c;保证申请到的内存可以映射到对应的freeList中。映射规则&am…

Linux命令(129)之dstat

linux命令之dstat 1.dstat介绍 linux命令dstat是用来实时显示系统中各个进程的资源占用情况 2.dstat用法 dstat [参数] dstat参数 参数说明-c显示CPU的相关信息-d显示磁盘的相关信息-g显示page相关的统计数据-m显示内存的相关统计数据-n显示网络的相关统计数据-p显示进程的…

配置你的VsCode服务器,随时随地写代码!

Hello&#xff0c;大家好&#xff0c;好久不见&#xff01;前段时间忙着秋招和论文&#xff0c;临近秋招结束&#xff0c;终于有时间更新了 前段时间实验室搞一个4090服务器&#xff0c;终于可以无所忌惮地跑深度学习咯&#xff0c;刚好要配置环境&#xff0c;今天就教大家通…

Unity收费对谁影响最大

Unity的收费政策对以下几类人群影响最大&#xff1a; 游戏开发商&#xff1a;Unity收费政策中最直接的影响对象就是游戏开发商。对于那些使用Unity引擎制作游戏的开发商来说&#xff0c;他们将需要考虑新的许可证费用和服务费用&#xff0c;这可能会对他们的盈利和发展产生影响…

EASYEXCEL(一)

1.读取excel 读监听器 Slf4j public class StudentReadListener extends AnalysisEventListener<Student> {// 每读一样&#xff0c;会调用该invoke方法一次Overridepublic void invoke(Student data, AnalysisContext context) {System.out.println("data "…

Linux MYSQL-5.7.23-rpm安装(附带安装包)

系统环境 OS 版本(Linux) CentOS-7-x86_64-Minimal-1511Java版本 jdk1.7及以上 卸载系统自带mariadb-lib rpm -qa|grep mariadbrpm -e mariadb-libs-5.5.68-1.el7.x86_64 --nodeps解压tar包 tar -xvf mysql*.tar以下加粗rpm包需要安装&#xff1a; mysql-community-common…

LeetCode26.删除有序数组中的重复项(双指针法)

LeetCode26.删除有序数组中的重复项 1.问题描述2.解题思路3.代码 1.问题描述 给你一个 非严格递增排列 的数组 nums &#xff0c;请你 原地 删除重复出现的元素&#xff0c;使每个元素 只出现一次 &#xff0c;返回删除后数组的新长度。元素的 相对顺序 应该保持 一致 。然后返…

php怎么检测字符串是否只含数字

1、用is_numeric()检测一个字符串是否为数字字符串&#xff0c;语法“is_numeric (字符串)”&#xff0c;如果返回TRUE则只含数字,带小数点的也是数字类型 is_numeric(a123) //false is_numeric(123) //true is_numeric(3.14) //true2、用preg_replace()配合正则表达式过滤字符…

基于SSM的学院网站设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;Vue 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是 目录…

Transformers实战——多项选择

文章目录 一、导入相关包二、加载数据集三、数据集预处理四、创建模型五、创建评估函数六、配置训练参数七、创建训练器八、模型训练九、模型预测 !pip install transformers datasets evaluate accelerate 一、导入相关包 import evaluate from datasets import DatasetDict,…

用ScheduledExecutorService接口,Quartz框架等创建定时任务

【点我-这里送书】 本人详解 作者:王文峰,参加过 CSDN 2020年度博客之星,《Java王大师王天师》 公众号:JAVA开发王大师,专注于天道酬勤的 Java 开发问题中国国学、传统文化和代码爱好者的程序人生,期待你的关注和支持!本人外号:神秘小峯 山峯 转载说明:务必注明来源(…

小程序常见操作

测试时访问本地http服务器调用报错 微信开发者工具&#xff08;右上角&#xff09;-> 详情->本地设置->不校验合法域名、web-view(业务域名)... -> 去除勾选使用npm包 1) 工程目录下创建package.jsonnpm init(手动完成设定) / npm init -y (默认设定) 2) 安装 np…

SAP权限相关的表及如何使用FM获取用户权限

一、SAP权限相关的表 AGR_1016 活动组参数文件名称 AGR_1016B 活动组参数文件名称 AGR_1250 活动组的权限数据(通过权限对象 查 角色) AGR_1251 活动组的权限数据 AGR_1252 …

AVR单片机在机器人视觉导航中的应用研究

AVR单片机在机器人视觉导航中的应用是一项前沿的研究领域&#xff0c;旨在实现机器人在未知环境中的自主导航和避障功能。本文将介绍AVR单片机在机器人视觉导航中的应用原理和实现步骤&#xff0c;并提供相应的代码示例。 1. 导航概述 机器人视觉导航是基于计算机视觉和控制理…

SpringBoot 整合 JdbcTemplate(配置多数据源)

数据持久化有几个常见的方案&#xff0c;有 Spring 自带的 JdbcTemplate 、有 MyBatis&#xff0c;还有 JPA&#xff0c;在这些方案中&#xff0c;最简单的就是 Spring 自带的 JdbcTemplate 了&#xff0c;这个东西虽然没有 MyBatis 那么方便&#xff0c;但是比起最开始的 Jdbc…

c语言回文数

以下是用C语言编写的回文数代码&#xff1a; #include <stdio.h>int main() { int num, reversedNum 0, remainder, originalNum; printf("请输入一个正整数&#xff1a;"); scanf("%d", &num); originalNum num; while (num …