> Как обеспечить корректную обработку запросов при параллельном выполнении для одного пользователя (JavaScript)

Уровень: senior · Роль: frontend · Язык: JavaScript · Категория: Технические вопросы

Компании: QueenInteractiveGamesLtd

Стек: Node.js, JavaScript

> Пример ответа

Для корректной обработки параллельных запросов одного пользователя на фронтенде можно использовать несколько подходов:

Отмена предыдущих запросов - с помощью AbortController отменяем запрос, если приходит новый от того же пользователя:

JAVASCRIPT
let currentController = null;

async function fetchUserData(userId) {
  if (currentController) currentController.abort();
  currentController = new AbortController();
  
  try {
    const response = await fetch(`/api/users/${userId}`, {
      signal: currentController.signal
    });
    return response.json();
  } catch (error) {
    if (error.name !== 'AbortError') throw error;
  }
}

Очередь запросов - последовательное выполнение с помощью цепочки промисов:

JAVASCRIPT
class RequestQueue {
  constructor() {
    this.queue = Promise.resolve();
  }
  
  enqueue(requestFn) {
    this.queue = this.queue.then(() => requestFn());
    return this.queue;
  }
}

const queue = new RequestQueue();
queue.enqueue(() => fetch('/api/data1'));
queue.enqueue(() => fetch('/api/data2'));

Debouncing - задержка выполнения запроса до прекращения активности пользователя:

JAVASCRIPT
function debounce(fn, delay = 300) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}

const debouncedSearch = debounce((query) => {
  fetch(`/api/search?q=${query}`);
});

Использование уникальных идентификаторов - добавление requestId для проверки актуальности ответа:

JAVASCRIPT
let lastRequestId = 0;

async function fetchWithId(url) {
  const requestId = ++lastRequestId;
  const response = await fetch(url);
  const data = await response.json();
  
  if (requestId !== lastRequestId) return; // устаревший ответ
  return data;
}

Выбор метода зависит от сценария: для поиска подходит debouncing, для загрузки данных при навигации - отмена запросов, для критичных операций - очередь.