如何取消 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 調用而感到高興，你也應該如此！服務器