1. 需求
现在前端都是SPA,我们什么时候需要取消HTTP请求呢?
- 当我们从一个页面跳转到另外一个页面时,如果前一个页面的请求还没有返回,那么我们希望取消前一个页面的请求
- 某些操作耗时比较长(不能是保存等操作哦),如果用户不想等待呢,取消了操作,对应我们也需要取消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', {