axios实现中断请求

J.Le@

已于 2024-02-23 11:23:32 修改

阅读量510

点赞数 12

文章标签：前端 javascript 开发语言

于 2024-02-23 11:22:49 首次发布

本文链接：https://blog.csdn.net/qq_41965425/article/details/136251266

版权

文章讲述了在查询数据列表时，通过在请求之前检测并取消重复请求，减少不必要的网络请求，从而提升性能，避免快速请求被较慢请求覆盖。作者使用axios的CancelToken和请求拦截器实现了这个优化策略。

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

情景：查询数据列表的时候，请求时间长，筛选条件的时候，多次请求，导致请求慢的数据覆盖请求快的数据

1.多次请求数据时，保留最后一个请求，前面的请求取消掉。

刚开始百度搜到的是在响应拦截器中移除请求，但是我在测试的时候发现在响应中拦截取消的请求可能是最后一个，所以改成了在请求之前就判断有没有重复的请求，有的话就先取消重复的请求，在发起最后一个请求。

let pending = []; // 创建一个数组保存所有取消请求的cancel方法和请求url
const CancelToken = axios.CancelToken; // 获取axios的CancelToken

// 清除请求方法
const removePending = (config) => {
    for (const p in pending) {
        // 判断url是否重复，重复择取消请求，
        if (pending[p].url === config.url && config.url == '/admin/resource/dataset') {
            pending[p].fun(); // 执行取消
        }
    }
    pending = pending.filter(item => item.url !== config.url)// 过滤掉已经返回的请求
}

// request拦截器
service.interceptors.request.use(config => {
    removePending(config)
    config.cancelToken = new CancelToken(executor => {
        pending.push({url: config.url, fun: executor});
    })
 });

实现效果就是这样：