如何取消 Fetch 请求

时间 2020-03-28

标签如何取消 fetch 请求繁體版

原文原文链接

做者：David Walsh
翻译：疯狂的技术宅javascript

原文：https://davidwalsh.name/cance...前端

未经容许严禁转载java

JavaScript 的 promise一直是该语言的一大胜利——它们引起了异步编程的革命，极大地改善了 Web 性能。原生 promise 的一个缺点是，到目前为止，尚未能够取消 fetch 的真正方法。 JavaScript 规范中添加了新的 AbortController，容许开发人员使用信号停止一个或多个 fetch 调用。程序员

如下是取消 fetch 调用的工做流程：web

建立一个 AbortController 实例
该实例具备 signal 属性
将 signal 传递给 fetch option 的 signal
调用 AbortController 的 abort 属性来取消全部使用该信号的 fetch。

停止 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}`);
});

// Abort request
controller.abort();

在 abort 调用时发生 AbortError，所以你能够经过比较错误名称来侦听 catch 中的停止操做。编程

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

将相同的信号传递给多个 fetch 调用将会取消该信号的全部请求：segmentfault

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);

杰克·阿奇博尔德（Jack Archibald）在他的文章 Abortable fetch 中，详细介绍了一个很好的应用，它可以用于建立可停止的 Fetch，而无需全部样板：promise

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

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

说实话，我对取消 Fetch 的方法并不感到兴奋。在理想的世界中，经过 Fetch 返回的 Promise 中的 .cancel() 会很酷，可是也会带来一些问题。不管如何，我为可以取消 Fetch 调用而感到高兴，你也应该如此！服务器

本文首发微信公众号：前端先锋

欢迎扫描二维码关注公众号，天天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章：

更多文章...