Как отменить запрос HTTP fetch ()?
существует новый API для выполнения запросов из JavaScript: fetch (). Есть ли встроенный механизм для отмены этих запросов в полете?
6 ответов:
Я не верю, что есть способ отменить запрос с помощью существующего API выборки. Сейчас об этом идет дискуссия на https://github.com/whatwg/fetch/issues/27
обновление мая 2017: по-прежнему нет разрешения. Запросы не могут быть отменены. Больше обсуждения на https://github.com/whatwg/fetch/issues/447
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) и более поздних версиях.
по состоянию на февраль 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(); }) } } } }
на данный момент нет правильного решения, как говорит @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(); });
используя сине отмена функция до тех пор, пока браузеры догнать еще один вариант.
import Promise from 'bluebird' const {fetch} = window window.fetch = function(...args) { return Promise.resolve(fetch.apply(window, args)) }
Я знаю, что вы просили, а это может быть полезным кому-то.