Как отменить запрос, если предыдущий ещё не завершился?

При активном UI часто возникает ситуация, когда новый запрос важнее предыдущего.

Определение

Определение: Отмена запроса — это прерывание ещё не завершившегося HTTP-запроса, чтобы его результат не влиял на состояние приложения.

Зачем отменять запросы

1. Избежать race condition

   • Старый запрос может завершиться позже нового и “перезатереть” актуальные данные.

2. Снизить нагрузку

   • Сервер и браузер не тратят ресурсы на ненужные ответы.

3. Предсказуемый state

   • В состоянии приложения всегда данные от последнего запроса.

Как это делается с fetch

1. Создаётся AbortController

2. Его signal передаётся в fetch

3. Перед новым запросом вызывается abort()

Пример: отмена предыдущего запроса

let controller;

async function loadData() {
  if (controller) {
    controller.abort(); // отменяем предыдущий запрос
  }

  controller = new AbortController();

  try {
    const res = await fetch("/api/data", {
      signal: controller.signal,
    });
    const data = await res.json();
    // обновляем state
  } catch (e) {
    if (e.name !== "AbortError") {
      // реальная ошибка
      console.error(e);
    }
  }
}

Частые сценарии использования

1. Поиск по вводу

   • Пользователь печатает → старые запросы отменяются.

2. Polling

   • Новый цикл отменяет предыдущий, если тот завис.

3. React effects

   • При смене props/filters cleanup-функция отменяет запрос.

Вывод

Отмена запросов — обязательная практика для динамичных интерфейсов: она защищает от гонок, уменьшает нагрузку и делает данные в UI актуальными.