Что произойдёт, если пользователь будет быстро переключаться между вкладками, каждая из которых делает API-запрос? Как это пофиксить?

Проблема гонки запросов

Когда пользователь быстро переключается между вкладками, каждая вкладка инициирует API-запрос. Ответы могут приходить в произвольном порядке: запрос, отправленный позже, может завершиться раньше, а более ранний — позже. Если приложение обрабатывает каждый ответ и обновляет состояние, последний пришедший ответ (даже если он устарел) перезапишет актуальные данные. Это классическая гонка запросов (race condition).

Решение через AbortController

Современный способ — отменять предыдущий запрос при переключении вкладки. Используйте AbortController: создайте контроллер для каждого запроса и вызывайте abort() перед новым запросом. Тогда старый запрос будет отменён, и его ответ не попадёт в обработчик.

let controller;

async function fetchData(url) {
  if (controller) controller.abort();
  controller = new AbortController();
  try {
    const res = await fetch(url, { signal: controller.signal });
    return await res.json();
  } catch (e) {
    if (e.name === 'AbortError') return;
    throw e;
  }
}

Альтернативный подход: игнорирование устаревших ответов

Если отмена невозможна (например, при использовании старых библиотек), можно проверять актуальность ответа. Введите счётчик или уникальный идентификатор запроса. При получении ответа сравнивайте его с текущим идентификатором — если не совпадает, игнорируйте.

let requestId = 0;

async function fetchData(url) {
  const currentId = ++requestId;
  const data = await fetch(url).then(r => r.json());
  if (currentId === requestId) {
    // обновляем состояние
  }
}

Вывод

Гонки запросов — частая проблема в асинхронных интерфейсах. Используйте AbortController для отмены устаревших запросов или проверку идентификатора, чтобы гарантировать, что в состояние попадают только актуальные данные. Это особенно важно для вкладок, поиска с автодополнением и других сценариев с частыми запросами.