Как отменить запрос на сервер (promise axios & fetch)

Недавно я проходил собеседование и мне задали вопрос к которому я не был готов. Этот вопрос про то как можно отменить запрос на сервер. На тот момент я не знал ответ и я пошёл исследовать это. В этой статье мы рассмотрим как отменить promise.

XMLHttpRequest

До появления fetch мы использовали XMLHttpRequest, у него был метод abort(), достаточно сохранить ссылку на экземпляр реквеста и в нужное время вызвать метод. Исторически сложилось, что из-за того, что мы стали чаще взаимодействовать с сервером нам стало нужно более удобный инструмент. Этим инструментом стал axios. По сути он стал промышленным стандартом.

Если мы говорим об использовании в браузере, то axios обёртка над XMLHttpRequest, а значит у него должен быть метод abort.

Axios

В axios для закрытия промиса мы можем передать параметра cancelToken. Далее пример использования:

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function (thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // handle error
  }
});

axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})

// Закрытие запроса (сообщение опционально)
source.cancel('Запрос отклонён пользователем');

Подробнее вы можете прочитать по ссылке

Fetch

Для fetch есть похожее api — AbortController. Пример использования:

let controller = new AbortController();
fetch(url, {
  signal: controller.signal
});

controller.abort();

Отдельно можно использовать некоторые свойства и методы свойства signal.

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

// срабатывает при вызове controller.abort()
signal.addEventListener('abort', () => alert("отмена!"));

controller.abort(); // отмена!

alert(signal.aborted); // true

Подробнее о AbortController можете прочитать на https://learn.javascript.ru/fetch-abort и https://developer.mozilla.org/ru/docs/Web/API/AbortController.

Isomorphic-fetch

На данный момент (26.09.2021) isomorphic-fetch не поддерживает AbortController, используйте axios или как-то разделяйте запросы в nodejs и браузере и используйте стандарный http в nodejs (request.destroy())

P.S.

Переезжаю на новый адрес сайта https://express.xakplant.ru/. Оцените новый блог, напишите как он вам. Я написал его на next js. Если у вас есть вопросы как соединить nextjs и wordpress то обязательно напишите их в комментариях.

Поддержи Xakplant

Я давно хочу развить видеоверсию, но пока этого не получается из-за нехватки ресурсов. Сейчас я собираю деньги на новый компьютер и микрофон. Поддержи xaklant и ты увидишь полезные видео быстрее.

Поддержать