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

公共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();
  }
})
相关推荐
蜚鸣5 天前
Vue的快速入门
vue
吃饭最爱6 天前
⽹络请求Axios的概念和作用
vue
魂尾ac6 天前
Django + Vue3 前后端分离技术实现自动化测试平台从零到有系列 <第一章> 之 注册登录实现
后端·python·django·vue
是罐装可乐6 天前
深入理解 Vue3 Router:三种路由模式的工作原理与实战应用
架构·vue·路由·history·hash·ssr·router
老华带你飞6 天前
租房平台|租房管理平台小程序系统|基于java的租房系统 设计与实现(源码+数据库+文档)
java·数据库·小程序·vue·论文·毕设·租房系统管理平台
zhz52147 天前
Spring Boot + Redis 缓存性能优化实战:从5秒到毫秒级的性能提升
java·spring boot·redis·缓存·vue
小胖墩有点瘦8 天前
【基于协同过滤的校园二手交易平台】
java·vue·毕业设计·springboot·计算机毕业设计·协同过滤·校园二手交易平台
小圣贤君8 天前
小说创作中的时间轴体验设计:事序图交互与用户体验优化
electron·vue·甘特图·时序图·写作软件
知识分享小能手8 天前
React学习教程,从入门到精通,React 构造函数(Constructor)完整语法知识点与案例详解(16)
前端·javascript·学习·react.js·架构·前端框架·vue
@AfeiyuO8 天前
分类别柱状图(Vue3)
typescript·vue·echarts