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

Question

Запрос отменяют, чтобы не обрабатывать устаревший ответ и не держать лишние соединения. В браузере для этого используют AbortController, передавая signal в fetch. Перед новым запросом предыдущий контроллер вызывают через abort(). Это особенно важно при polling, поиске по вводу и быстрых сменах фильтров.

YeaHub · Accepted Answer

При активном UI часто возникает ситуация, когда новый запрос важнее предыдущего.ОпределениеОпределение: Отмена запроса — это прерывание ещё не завершившегося HTTP-запроса, чтобы его результат не влиял на состояние приложения.Зачем отменять запросыИзбежать race conditionСтарый запрос может завершиться позже нового и “перезатереть” актуальные данные.Снизить нагрузкуСервер и браузер не тратят ресурсы на ненужные ответы.Предсказуемый stateВ состоянии приложения всегда данные от последнего запроса.Как это делается с fetchСоздаётся AbortControllerЕго signal передаётся в fetchПеред новым запросом вызывается 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);
    }
  }
}
Частые сценарии использованияПоиск по вводуПользователь печатает → старые запросы отменяются.PollingНовый цикл отменяет предыдущий, если тот завис.React effectsПри смене props/filters cleanup-функция отменяет запрос.ВыводОтмена запросов — обязательная практика для динамичных интерфейсов: она защищает от гонок, уменьшает нагрузку и делает данные в UI актуальными.