有哪些网站可以做设计比赛,共享互助医疗网站建设,网站设计制作案例,汕头网站公司公共loading是项目系统中很常见的场景#xff0c;处理方式也不外乎三个步骤#xff1a; 通过全局状态管理定义状态值#xff08;vuex、pinia等#xff09;。 在程序主入口监听状态值变化#xff0c;从而展示/隐藏laoding动画。 在请求和相应拦截器中变更状态值。 第一二…公共loading是项目系统中很常见的场景处理方式也不外乎三个步骤 通过全局状态管理定义状态值vuex、pinia等。 在程序主入口监听状态值变化从而展示/隐藏laoding动画。 在请求和相应拦截器中变更状态值。 第一二步骤处理大同小异但在第三步中网上很多博文分享的方法是:在请求拦截中展示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
