JavaScript的 Promise 一直是该语言的一大胜利——它带来了异步编码的革命，极大地改善了web上的性能。原生 Promise 的一个缺点是，没有一种真正的方法可以取消 fetch...直到现在。JavaScript规范中添加了一个新的 AbortController，允许开发人员使用一个信号来中止一个或多个 fetch 调用。

以下是取消 fetch 调用的工作流程：

• 创建一个 AbortController 实例
• 该实例具有 signal(信号)属性
• 将 signal 作为 fetch 的选项传递
• 调用 AbortController 的 abort属性来取消使用该信号的所有读取。

中止 Fetch

以下是取消 fetch 请求的基本步骤：

const controller = new AbortController();
const { signal } = controller;

fetch(\"http://localhost:8000\", { signal }).then(response => {
    console.log(`Request 1 is complete!`);
}).catch(e => {
    console.warn(`Fetch 1 error: ${e.message}`);
});

// 终止请求
controller.abort();

在调用 abort 时发生 AbortError，因此您可以通过比较错误名称来监听 catch中 的aborted fetches：

}).catch(e => {
    if(e.name === \"AbortError\") {
        // 我们知道已经取消了!
    }
}); 

将相同的信号传递给多个 fetch 调用将会取消所有使用该信号的请求：

const controller = new AbortController();
const { signal } = controller;

fetch(\"http://localhost:8000\", { signal }).then(response => {
    console.log(`Request 1 is complete!`);
}).catch(e => {
    console.warn(`Fetch 1 error: ${e.message}`);
});

fetch(\"http://localhost:8000\", { signal }).then(response => {
    console.log(`Request 2 is complete!`);
}).catch(e => {
    console.warn(`Fetch 2 error: ${e.message}`);
});

// 等待2秒以中止两个请求
setTimeout(() => controller.abort(), 2000);

一个创建可中止的 fetch 的一个不错的实用程序，无需所有样板：

function abortableFetch(request, opts) {
  const controller = new AbortController();
  const signal = controller.signal;

  return {
    abort: () => controller.abort(),
    ready: fetch(request, { ...opts, signal })
  };
}

说实话，我并不超级兴奋取消请求的方法。在理想的情况下，对于 fetch返回的 Promise 使用一个基本的 .cancel() 会很酷，但是也会带来一些问题。无论如何，我对能够取消fetch 调用感到兴奋，你也应该如此！

感谢阅读。

本头条号聚焦大前端技术和程序员成长，如果对你有所启发和帮助，可以点个关注、收藏。

作者简介：同名微信公众号作者，Web前端工程师，全栈开发工程师、持续学习者。

现在关注做同名微信公众号，送精品视频视频教程大礼包！

#JavaScript WEB前端开发# #每日学习JavaScript# #JavaScript#