Axios 取消发送的请求

最新推荐文章于 2024-10-17 16:45:22 发布

原创最新推荐文章于 2024-10-17 16:45:22 发布 · 294 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#http #ajax #html

JavaScript 同时被 2 个专栏收录

19 篇文章

订阅专栏

前端

17 篇文章

订阅专栏

本文详细介绍了如何在axios中使用cancelToken避免连续请求堆积，通过实例演示了如何在已有请求未响应时主动取消请求。博客还提到了XMLHttpRequest的abort方法及其在请求管理中的应用。

功能，在发出上一个请求还没返回的时候，为了防止有连续多个请求返回，对上一个未返回的请求执行取消操作。

底层是 axios 调用了 XMLHttpRequest 的 abort() 操作，取消上一条请求

XMLHttpRequest.abort() - Web API 接口参考 | MDN (mozilla.org)

代码

const cancel = null;

function request() {
    // 检查是否有 cancelToken，有就会执行
    // 背后的调用做过处理
    // 如果请求已经返回或者已经被取消就不会执行
    if (cancel) {
        cancel();
    }
    this.axios({
        method: 'get',
        url: '...',
        // 请求时配置，将 cancelToken 保存至一个全局变量，之后使用
        cancelToken: new this.axios.CancelToken(ct => {
            token = ct;
        })
    })
        .then(...)
        .catch(...);
}