Как отменить запрос HTTP fetch ()?

существует новый API для выполнения запросов из JavaScript: fetch(). Есть ли какой-либо встроенный механизм для отмены этих запросов в полете?

97
ajax fetch-api javascript

6 ответов

TL / DR:

fetch теперь поддерживает

96

Я не верю, что есть способ отменить запрос с помощью существующего API выборки. Об этом идет обсуждение в https://github.com/whatwg/fetch/issues/27

обновление май 2017: по-прежнему нет разрешения. Запросы нельзя отменить. Больше обсуждения на https://github.com/whatwg/fetch/issues/447

57

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

настройка:

const controller = new AbortController();
const signal = controller.signal;

fetch(url, { signal }).then(response => {
  return response.text();
}).then(text => {
  console.log(text);
});

прервать: controller.abort()

работает в edge 16 (2017-10-17), firefox 57 (2017-11-14), chrome 67 (2018-05-29) и более поздних версиях.

8

от Февраля 2018, fetch() может быть отменен с помощью кода ниже на Chrome (читать Использование Читаемых Потоков включить поддержку 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();
        })
      }
    }
  }
}
4

на данный момент нет правильного решения, как говорит @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();
});
3

используя сине отмена функция до тех пор, пока браузеры догнать это еще один вариант.

import Promise from 'bluebird'
const {fetch} = window
window.fetch = function(...args) {
    return Promise.resolve(fetch.apply(window, args))
}

Я знаю, что вы просили, а это может быть полезным кому-то.

0