JavaScript承诺一直是该语言的一大胜利-它们引发了异步编码的革命，极大地改善了Web性能。 原生承诺的一个缺点是，直到现在，还没有真正的方法来取消fetch 。 JavaScript规范中添加了一个新的AbortController ，它将允许开发人员使用信号来中止一个或多个提取调用。
以下是取消fetch调用的工作流程：
创建一个AbortController实例 该实例具有signal属性 将signal作为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的中止提取：
}).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中 ，详细介绍了一个不错的实用程序，它无需创建所有样板即可创建可中止的访存：
function abortableFetch(request, opts) { const controller = new AbortController(); const signal = controller.signal; return { abort: () => controller.abort(), ready: fetch(request, { ...opts, signal }) }; }如果我完全诚实，我对取消获取的方法并不感到兴奋。 在理想的世界中，通过获取返回的Promise的基本.cancel()很酷，但是随之而来的还有一些问题。 无论如何，我很高兴能够取消fetch呼叫，您也应该如此！
.x-secondary-small { display: none; } @media only screen and (max-width: 600px) { .x-secondary { max-height: none; } .x-secondary-large { display: none; } .x-secondary-small { display: block; } }翻译自: https://davidwalsh.name/cancel-fetch
