TL / DR：

Question

有一个用于从JavaScript发出请求的新API：fetch（）。是否有内置的机制可以在飞行中取消这些请求？

Answer 1

TL / DR：

截至2017年9月20日，

fetch现在支持signal参数，但不支持所有浏览器似乎都支持此atm 。

这是我们即将看到的更改，因此您应该可以使用AbortController s AbortSignal取消请求。

长版

如何：

它的工作方式是：

第1步：您创建了AbortController（现在我刚使用this）

const controller = new AbortController()

第2步：你得到AbortController的信号如下：

const signal = controller.signal

第3步：您将signal传递给fetch：

fetch(urlToFetch, {
    method: 'get',
    signal: signal, // <------ This is our AbortSignal
})

第4步：只需在需要时中止：

controller.abort();

以下是一个如何工作的示例（适用于Firefox 57 +）：

＆＃13;

<script>
    // Create an instance.
    const controller = new AbortController()
    const signal = controller.signal

    /*
    // Register a listenr.
    signal.addEventListener("abort", () => {
        console.log("aborted!")
    })
    */


    function beginFetching() {
        console.log('Now fetching');
        var urlToFetch = "https://httpbin.org/delay/3";

        fetch(urlToFetch, {
                method: 'get',
                signal: signal,
            })
            .then(function(response) {
                console.log(`Fetch complete. (Not aborted)`);
            }).catch(function(err) {
                console.error(` Err: ${err}`);
            });
    }


    function abortFetching() {
        console.log('Now aborting');
        // Abort.
        controller.abort()
    }

</script>



<h1>Example of fetch abort</h1>
<hr>
<button onclick="beginFetching();">
    Begin
</button>
<button onclick="abortFetching();">
    Abort
</button>

＆＃13;

来源：

AbortController的最终版本已添加到DOM规范
现在合并了获取规范的corresponding PR。
此处提供了跟踪AbortController实施的浏览器错误：Firefox：#1378342，Chromium：#750599，WebKit：#174980，Edge：#13009916。

Answer 2

我不相信有一种方法可以使用现有的fetch API取消请求。在https://github.com/whatwg/fetch/issues/27

正在进行讨论

2017年5月更新：仍无法解决。请求无法取消。在https://github.com/whatwg/fetch/issues/447

进行更多讨论

Answer 3

https://developers.google.com/web/updates/2017/09/abortable-fetch

https://dom.spec.whatwg.org/#aborting-ongoing-activities

// setup AbortController
const controller = new AbortController();
// signal to pass to fetch
const signal = controller.signal;

// fetch as usual
fetch(url, { signal }).then(response => {
  ...
}).catch(e => {
  // catch the abort if you like
  if (e.name === 'AbortError') {
    ...
  }
});

// when you want to abort
controller.abort();

在边缘16（2017-10-17），firefox 57（2017-11-14），桌面游猎11.1（2018-03-29），ios safari 11.4（2018-03-29），chrome 67（ 2018-05-29），以及之后。

在较旧的浏览器上，您可以使用github's whatwg-fetch polyfill和AbortController polyfill。你也可以detect older browsers and use the polyfills conditionally：

import 'abortcontroller-polyfill/dist/abortcontroller-polyfill-only'
import {fetch} from 'whatwg-fetch'

// use native browser implementation if it supports aborting
const abortableFetch = ('signal' in new Request('')) ? window.fetch : fetch

Answer 4

自2018年2月起，可以使用Chrome上的以下代码取消fetch()（阅读Using Readable Streams以启用Firefox支持）。 catch()没有错误提起，这是一个临时解决方案，直到完全采用AbortController。

fetch('YOUR_CUSTOM_URL')
.then(response => {
  if (!response.body) {
    console.warn("ReadableStream is not yet supported in this browser.  See https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream")
    return response;
  }

  // get reference to ReadableStream so we can cancel/abort this fetch request.
  const responseReader = response.body.getReader();
  startAbortSimulation(responseReader);

  // Return a new Response object that implements a custom reader.
  return new Response(new ReadableStream(new ReadableStreamConfig(responseReader)));
})
.then(response => response.blob())
.then(data => console.log('Download ended. Bytes downloaded:', data.size))
.catch(error => console.error('Error during fetch()', error))


// Here's an example of how to abort request once fetch() starts
function startAbortSimulation(responseReader) {
  // abort fetch() after 50ms
  setTimeout(function() {
    console.log('aborting fetch()...');
    responseReader.cancel()
    .then(function() {
      console.log('fetch() aborted');
    })
  },50)
}


// ReadableStream constructor requires custom implementation of start() method
function ReadableStreamConfig(reader) {
  return {
    start(controller) {
      read();
      function read() {
        reader.read().then(({done,value}) => {
          if (done) {
            controller.close();
            return;
          }
          controller.enqueue(value);
          read();
        })
      }
    }
  }
}

Answer 5

至于现在没有适当的解决方案，正如@spro所说。

但是，如果您有正在进行的响应并且正在使用ReadableStream，则可以关闭该流以取消请求。

fetch('http://example.com').then((res) => {
  const reader = res.body.getReader();

  /*
   * Your code for reading streams goes here
   */

  // To abort/cancel HTTP request...
  reader.cancel();
});

Answer 6

这适用于浏览器和nodejs Live browser demo

const cpFetch= require('cp-fetch');
const url= 'https://run.mocky.io/v3/753aa609-65ae-4109-8f83-9cfe365290f0?mocky-delay=3s';
 
const chain = cpFetch(url, {timeout: 10000})
    .then(response => response.json())
    .then(data => console.log(`Done: `, data), err => console.log(`Error: `, err))
 
setTimeout(()=> chain.cancel(), 1000); // abort the request after 1000ms

Answer 7

简单的打字版本（获取被中止）：

export async function fetchWithTimeout(url: RequestInfo, options?: RequestInit, timeout?: number) {
    return new Promise<Response>((resolve, reject) => {
        const controller = new AbortController();
        const signal = controller.signal;

        const timeoutId = setTimeout(() => {
            console.log('TIMEOUT');
            reject('Timeout');
            // Cancel fetch in progress
            controller.abort();
        }, timeout ?? 5 * 1000);

        fetch(url, { ...options, signal })
            .then((response) => {
                clearTimeout(timeoutId);
                resolve(response);
            })
            .catch((e) => reject(e));
    });
}

也许你需要一个 polyfill（例如 IE11）：

https://polyfill.io/v3/polyfill.min.js?features=AbortController

如何取消HTTP fetch（）请求？

7 个答案:

TL / DR：

长版

如何：

来源：