vue2 3 axios 请求重试、取消请求、loading 串行并行等（分享）_vue await 报错取消loading

最新推荐文章于 2024-05-23 15:51:14 发布

2401_84446610

最新推荐文章于 2024-05-23 15:51:14 发布

阅读量494

点赞数 18

分类专栏：程序员文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/2401_84446610/article/details/138298764

版权

本文介绍了如何在 Vue2 项目中结合 Axios 实现请求的重试机制、取消请求、Loading 管理，包括并行请求的 Loading 控制和串行请求的处理。通过添加请求和响应拦截器，实现了在请求错误时的错误提示以及请求取消功能。同时展示了如何在请求中集成 Element UI 的 Loading 服务。

摘要由CSDN通过智能技术生成

return Promise.reject(error.response);

}
);


#### loading 串行、并行



> 
> 串行 loading 闪屏、并行 loading 提前关闭
> 
> 
> * 串行的情况是请求之间的依赖，请求 A 完成后立即开始请求 B，这样会导致 loading 闪屏
> * 并行是两个请求同时请求，请求 A 的时间为 5s，请求 B 的时间为 3s，因为 loading 都是同一个实例，会导致请求 B 时提前关闭 loading，关闭两秒后又请求到了新的数据
> 
> 
>

import axios from “axios”;
import { Loading, Message } from ‘element-ui’;

const instance = axios.create({
baseURL: “http://localhost:5500”,
timeout: 30000,
});

// 处理并行
let loadingCount = 0;

// 处理串行
let loadingTimer = null;

function loadingClose() {
loadingCount–;
if (!loadingCount) {
// 延迟等待是否还有下一个请求
loadingTimer = setTimeout(() => {
loadingInstance.close();
loadingTimer = null;
}, 300);
}
}

let loadingInstance = null;
// 添加请求拦截器
instance.interceptors.request.use(
(config) => {
loadingOpen();
return config;
},
(error) => {
Message.error(“请求错误：”