每一个你不满意的现在,都有一个你不努力的曾经. 网站首页 > js
在 avue中使用axios拦截器中 实现多次请求清除上一个请求数据 防止新的数
发布时间:2023-07-07 16:08:29
修改时间:2023-07-07 16:08:29
阅读:7252
评论:0
0
在 Avue 中使用 axios 拦截器实现多次请求清除上一个请求数据的功能,可以通过创建一个新的 axios 实例并配置请求和响应拦截器来实现。以下是如何在 Avue 项目中实现此功能:
1、创建一个名为 axiosInstance.js 的文件,并引入 axios:
import axios from 'axios';
2、创建一个新的 axios 实例:
const axiosInstance = axios.create({
// 可以在这里设置默认配置,如 baseURL, timeout 等
});
3、在 axiosInstance.js 文件中定义一个名为 pendingRequests 的 Map,用于存储正在进行的请求:
const pendingRequests = new Map();
4、创建一个名为 generateRequestKey 的辅助函数,用于根据请求信息生成唯一的请求 key:
function generateRequestKey(config) {
const { method, url, params, data } = config;
return [method, url, JSON.stringify(params), JSON.stringify(data)].join('&');
}
5、为 axios 实例配置请求拦截器:
axiosInstance.interceptors.request.use(
(config) => {
const requestKey = generateRequestKey(config);
if (pendingRequests.has(requestKey)) {
const cancelTokenSource = pendingRequests.get(requestKey);
cancelTokenSource.cancel('Canceled previous request');
}
const source = axios.CancelToken.source();
config.cancelToken = source.token;
pendingRequests.set(requestKey, source);
return config;
},
(error) => {
return Promise.reject(error);
}
);
在请求拦截器中,我们首先根据请求信息生成一个唯一的请求 key。然后检查此请求是否已经存在于 pendingRequests Map 中。如果存在,则取消之前的请求。最后,我们创建一个新的取消令牌源,并将其与请求 key 一起存储在 pendingRequests Map 中。
6、为 axios 实例配置响应拦截器:
axiosInstance.interceptors.response.use(
(response) => {
const requestKey = generateRequestKey(response.config);
pendingRequests.delete(requestKey);
return response;
},
(error) => {
if (axios.isCancel(error)) {
console.log('Request canceled:', error.message);
} else {
// Handle errors here, or throw them to handle in components
return Promise.reject(error);
}
}
);
在响应拦截器中,我们根据响应信息中的请求配置生成请求 key,并从 pendingRequests Map 中删除对应的请求。这样,我们可以确保在请求完成时清理已完成的请求。
7、将 axios 实例导出,以便在其他文件中使用:
export default axiosInstance;
现在,您可以在项目的其他部分使用封装好的 axios 实例来发起请求。以下是如何在 Vue 组件中使用这个 axios 实例:
import axiosInstance from '@/utils/axiosInstance';
export default {
// ...
methods:
回复列表
关键字词:span,style,font-size,1px,nbsp,请求
上一篇:css常用属性