每一个你不满意的现在,都有一个你不努力的曾经. 网站首页 > js
在 avue中使用axios拦截器中 实现多次请求清除上一个请求数据 防止新的数
发布时间:2023-07-07 16:08:29 修改时间:2023-07-07 16:08:29 阅读:5178 评论: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常用属性