如何取消提取请求

JavaScript的承诺一直是该语言的一大胜利——它们引发了一场异步编码革命，极大地提高了web上的性能。native promise的一个缺点是没有真正的方法来取消fetch…直到现在。JavaScript规范中添加了一个新的AbortController，它允许开发人员使用信号中止一个或多个fetch调用。

以下是取消取回调用的流程:

• 创建一个AbortController实例

• 该实例有一个signal属性

• 将信号作为signal的获取选项传递

• 调用AbortController的abort属性取消所有使用该信号的读取。

中止请求

以下是取消取回请求的基本框架:

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}`); }); // Abort request controller.abort();

在abort调用时发生AbortError，所以你可以通过比较错误名称来监听在catch中中止的fetch:

}).catch(e => {     if(e.name === "AbortError") {         // We know it's been canceled!     } });

将相同的信号传递给多个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}`); }); // Wait 2 seconds to abort both requests setTimeout(() => controller.abort(), 2000);

Jake Archibald在他的文章Abortable fetch中详细介绍了一个很好的实用程序，它可以在不需要所有模板的情况下创建可Abortable 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调用感到兴奋，您也应该如此!