Параллельные запросы в JavaScript: вот как это работает

Параллельные запросы в JavaScript — это ситуация, когда несколько операций запускаются почти одновременно, а код ждет их общий результат. Чаще всего речь про несколько fetch-запросов к API. Вместо того чтобы получить профиль пользователя, потом заказы, потом настройки, можно запустить все три запроса сразу и дождаться их через Promise.all

Важно: JavaScript не делает браузерную вкладку многопоточной магическим образом. Просто сетевые операции не блокируют основной поток, поэтому несколько запросов могут находиться «в полете» одновременно

Содержание

Последовательные и параллельные запросы
Более аккуратный пример
Что происходит при ошибке
А что с базами данных
Частые ошибки
Что почитать дальше по JavaScript
Что почитать дальше по JavaScript

Последовательные и параллельные запросы

Последовательный вариант выглядит просто, но может быть медленным:

const profileResponse = await fetch("/api/profile");
const profile = await profileResponse.json();

const ordersResponse = await fetch("/api/orders");
const orders = await ordersResponse.json();

const settingsResponse = await fetch("/api/settings");
const settings = await settingsResponse.json();

Здесь второй запрос начнется только после завершения первого, а третий — после второго. Такой порядок нужен, если следующий запрос зависит от предыдущего результата. Например, сначала надо получить userId, а уже потом запросить заказы конкретного пользователя

Если зависимости нет, лучше запускать запросы параллельно:

const [profileResponse, ordersResponse, settingsResponse] = await Promise.all([
  fetch("/api/profile"),
  fetch("/api/orders"),
  fetch("/api/settings")
]);

const [profile, orders, settings] = await Promise.all([
  profileResponse.json(),
  ordersResponse.json(),
  settingsResponse.json()
]);

Promise.all возвращает результаты в том же порядке, в котором вы передали промисы. Даже если /api/settings ответит первым, третий результат все равно попадет в третью переменную

Более аккуратный пример

Часто удобнее сразу проверять статус ответа. fetch сам по себе не считает HTTP 404 или 500 ошибкой JavaScript, поэтому проверку response.ok лучше писать явно

async function loadJson(url) {
  const response = await fetch(url);

  if (!response.ok) {
    throw new Error(`Ошибка запроса ${url}: ${response.status}`);
  }

  return response.json();
}

const [profile, orders, settings] = await Promise.all([
  loadJson("/api/profile"),
  loadJson("/api/orders"),
  loadJson("/api/settings")
]);

Такой код проще поддерживать: логика запроса находится в одной функции, а список адресов виден отдельно

Что происходит при ошибке

Главная особенность Promise.all: если один промис завершился ошибкой, весь Promise.all тоже завершится ошибкой. Это хорошо, когда данные нужны комплектом. Например, карточка клиента должна отрисоваться только с профилем, заказами и настройками

Если часть данных можно показать отдельно, используйте Promise.allSettled

const results = await Promise.allSettled([
  loadJson("/api/profile"),
  loadJson("/api/orders"),
  loadJson("/api/settings")
]);

results.forEach((result) => {
  if (result.status === "fulfilled") {
    console.log("Данные:", result.value);
  } else {
    console.log("Ошибка:", result.reason.message);
  }
});

Этот подход полезен для виджетов, где один блок может не загрузиться, но вся страница не должна ломаться

А что с базами данных

Из браузерного JavaScript обычно не делают прямые запросы к базе данных. Браузер обращается к API, а уже сервер работает с PostgreSQL, MySQL, MongoDB или другой базой. Поэтому «параллельные запросы в JavaScript» чаще означают параллельные HTTP-запросы. На сервере в Node.js принцип похожий: можно параллельно ждать несколько независимых операций, но нужно помнить про нагрузку и лимиты подключения

Частые ошибки

Первая ошибка — писать await внутри цикла там, где запросы независимы. Вторая — забывать обработку ошибок и получать пустую страницу. Третья — запускать сотни запросов одновременно: это может перегрузить API или упереться в браузерные ограничения. Четвертая — использовать параллельность там, где есть зависимость между шагами

Мини-задача: сделайте три тестовых запроса к открытому API или к локальным JSON-файлам. Сначала выполните их последовательно, затем через Promise.all. Выведите время выполнения через console.time() и console.timeEnd(). Разница станет понятной без теории