使用AbortController取消fetch请求 “Ajax是可以取消 Fetch是不可以取消?“

问题描述：

提示：在网页中，Ajax和Fetch是最常用的发起网络请求的两种方式。在面试中，关于这两者的区别也会被提及。你也许听说过这么一个说法，Ajax是可以取消的，Fetch是不可以取消的。

---

原因分析：

提示：使用ajax发起一个网络请求的代码大致如下：

var xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.onreadystatechange = function(){};
xhr.send();

想要中断这个ajax请求，直接调用

xhr.abort()

---

使用fetch发起一个网络请求的代码大致如下：

fetch(url)
    .then(r => r.json())
    .then(response => {

    })
    .catch(err => {
        console.error("Error in fetching!", err);
    });

fetch是基于promise的，可以在页面主线程、worker等地方使用，十分的方便。

想取消一个fetch请求，可以使用AbortController.

AbortController代表一个控制器对象，允许你在需要时中止一个或多个DOM请求。直接来看示例代码：

var controller = new AbortController();
var signal = controller.signal;

// 将signal传入fetch的第二个参数
fetch(url, { signal }) 
  .then(function(response) {
    ...
  }).catch(function(err) {
    if (err.name === 'AbortError') {
      console.log('Fetch was aborted');
    } else {
      console.error('Oops!', err);
    }
  });
  
setTimeout(() => {
  controller.abort(); // 取消fetch请求
}, 1000);

解决方案：

当我们主动取消fetch时，fetch的promise 会 reject 以下错误：

new DOMException(‘Aborted’, ‘AbortError’)

这个时候，会进入fecth的catch逻辑块。

当然，如果fetch已经resolve了，我们就无法取消fetch了。

AbortController 当前的兼容性如下：

polyfills如下：

https://www.npmjs.com/package/abort-controller

https://www.npmjs.com/package/abortcontroller-polyfill

总结

取消网络请求是一个很重要的点，特别是在页面中有大量请求，而用户切到其他页面时，适当的取消pending中的网络请求，可以减少网络资源的浪费和页面卡顿，提升用户体验。fetch，也是可以取消的。