Логотип YeaHub

База вопросов

Собеседования

Тренажёр

База ресурсов

Обучение

Навыки

Войти

Выбери, каким будет IT завтра — вместе c нами!

YeaHub — это полностью открытый проект, призванный объединить и улучшить IT-сферу. Наш исходный код доступен для просмотра на GitHub. Дизайн проекта также открыт для ознакомления в Figma.

© 2026 YeaHub

Документы

Медиа

Назад
Вопрос про JavaScript: optimizations

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

Вопрос проверяет знание способов отмены HTTP-запросов

Короткий ответ

Для отмены fetch используется AbortController. Создаем контроллер, передаем его в fetch, и при необходимости вызываем abort().

Длинный ответ

1. Использование AbortController

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

fetch('https://api.example.com/data', { signal })
  	.then(response => response.json())
  	.catch(err => {
    		if (err.name === 'AbortError') {
      			console.log('Запрос отменён');
    		} else {
      			console.error('Ошибка:', err);
    		}
  });

// Отменяем запрос через 2 секунды
setTimeout(() => controller.abort(), 2000);

2. Интеграция с React/Axios

В Axios есть встроенная отмена через CancelToken (в старых версиях) или AbortController (новые версии).

Пример с Axios:

const controller = new AbortController();

axios.get('https://api.example.com/data', {
  	signal: controller.signal
})
  .then(response => console.log(response.data))
  .catch(err => {
    	if (axios.isCancel(err)) {
      		console.log('Запрос отменён');
    	}
  });

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

3. Зачем это нужно?

  • Если пользователь ушел со страницы, но запрос еще выполняется.

  • При частых изменениях фильтров (например, поиск с автодополнением).

  • Для оптимизации производительности.

Важно: После abort() Promise переходит в состояние rejected с ошибкой AbortError.

Уровень

  • Рейтинг:

    4

  • Сложность:

    5

Навыки

  • JavaScript

    JavaScript

Ключевые слова

#optimizations

Подпишись на React Developer в телеграм