前端进阶(2)使用fetch/axios时, 如何取消http请求
1. 需求
现在前端都是SPA,我们什么时候需要取消HTTP请求呢?
当我们从一个页面跳转到另外一个页面时,如果前一个页面的请求还没有返回,那么我们希望取消前一个页面的请求
某些操作耗时比较长(不能是保存等操作哦),如果用户不想等待呢,取消了操作,对应我们也需要取消HTTP请求
对于原生的XMLHttpRequest
,是支持取消http请求(abort
)操作的: XMLHttpRequest.abort()
那么,当我们使用ES6的fetch,或者使用axios库,如何实现呢?
2. Fetch 取消http请求
fetch与XMLHttpRequest(XHR)类似,是ES6之后浏览器(除IE之外)默认支持的http操作函数。可惜不是默认支持abort操作。但我们可以通过AbortController
来实现, 直接上代码:
登录后复制
// 声明AbortControllerconst 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操作,
登录后复制
var source = axios.CancelToken.source(); axios.get('https://jackniu81.github.io', { cancelToken: source.token }).catch(function(err) { if (axios.isCancel(err)) { // handle our cancel operation console.log('Request canceled', err.message); } else { // handle real error here } });// 需要取消请求时,调用:source.cancel('Abort Request');
4. jquery 取消http请求
$.ajax内部已经实现了abort功能。直接调用.abort()
即可。
5. 总结
fetch
与AbortController
集成:我们将signal
属性作为可选参数(option)进行传递,之后 fetch 会监听它,因此它能够中止 fetch.AbortController 是可伸缩的,可以用于
一次性终止多个请求
;参考fetch的实现,我们自己的代码也完善一下,实现基于AbortController操作取消操作;
axios 默认支持Abort操作;
©著作权归作者所有:来自51CTO博客作者Jack_N的原创作品,如需转载,请注明出处,否则将追究法律责任