前端进阶（2）使用fetch/axios时，如何取消http请求

Bertha 。 2023-01-16 11:09 90阅读 0赞

> [前端进阶（2）使用fetch/axios时， 如何取消http请求][2_fetch_axios_ _http]

### 文章目录 ###

*  1. 需求
 *  2. Fetch 取消http请求
 *  3. axios取消http请求
 *  4. jquery 取消http请求
 *  5. 总结

# 1. 需求 #

现在前端都是SPA，我们什么时候需要取消HTTP请求呢？

1.  当我们从一个页面跳转到另外一个页面时，如果前一个页面的请求还没有返回，那么我们希望取消前一个页面的请求
2.  某些操作耗时比较长（不能是保存等操作哦），如果用户不想等待呢，取消了操作，对应我们也需要取消HTTP请求

对于原生的`XMLHttpRequest`,是支持取消http请求(`abort`)操作的: XMLHttpRequest.abort()  
那么，当我们使用ES6的fetch，或者使用axios库，如何实现呢？

# 2. Fetch 取消http请求 #

fetch与XMLHttpRequest(XHR)类似，是ES6之后浏览器（除IE之外）默认支持的http操作函数。可惜不是默认支持abort操作。但我们可以通过`AbortController`来实现， 直接上代码：

// 声明AbortController
    const controller = new AbortController();
    
    // 正常的http调用
    fetch('https://jackniu81.github.io', {  signal: controller.signal })
        .then(r => r.json())
        .then(response => { 
            console.log(response);
        })
        .catch(err => { 
            if (err.name === 'AbortError') { 
                console.log('Fetch was aborted')
            } else { 
                console.log('Error', err)
            }
        })；
    
    // 需要取消请求时，调用：
    controller.abort()

# 3. axios取消http请求 #

axios 已经实现了abort操作，

# 4. jquery 取消http请求 #

$.ajax内部已经实现了abort功能。直接调用`.abort()`即可。

# 5. 总结 #

1.  `fetch`与`AbortController`集成：我们将`signal`属性作为可选参数（option）进行传递，之后 fetch 会监听它，因此它能够中止 fetch.
2.  AbortController 是可伸缩的，可以用于`一次性终止多个请求`；
3.  参考fetch的实现，我们自己的代码也完善一下，实现基于AbortController操作取消操作；
4.  axios 默认支持Abort操作；

[2_fetch_axios_ _http]: https://jackniu81.github.io/2021/04/25/Web-Advanced-2-Cancel-HTTP-Request-in-fetch-axios/