Как правильно использовать async/await внутри цикла forEach в JavaScript?

Почему forEach не работает с async/await?

Проблема в том, что метод forEach не предназначен для работы с асинхронными функциями. Когда вы передаёте в forEach асинхронную callback-функцию, эта функция возвращает Promise, но forEach его игнорирует. Он просто запускает все callback-функции подряд, не дожидаясь их завершения. Это происходит потому, что forEach был создан для синхронных операций и не имеет механизма ожидания Promise.

В вашем коде происходит следующее:

• Вызов urls.forEach(async (url) => {...}) запускает три асинхронные функции одновременно.
• Каждая функция начинает выполнение, доходит до await fetch(url) и "засыпает", возвращая Promise.
• Так как forEach не ждёт эти Promise, он сразу переходит к следующей итерации и завершается.
• После завершения forEach выполняется console.log('All users loaded!').
• Через некоторое время Promise от fetch разрешаются, и выполняются console.log внутри каждой callback-функции.

Как правильно решить проблему?

Вот три основных способа правильно обработать асинхронные операции в массиве:

Способ 1: Цикл for...of (последовательное выполнение)

async function loadAllUsers() {
  for (const url of urls) {
    const userData = await fetchUserData(url);
    console.log('User loaded:', userData);
  }
  console.log('All users loaded!');
}

Цикл for...of идеально подходит для последовательного выполнения асинхронных операций. Он ждёт завершения каждого await перед тем, как перейти к следующей итерации. Это самый простой и читаемый способ.

Способ 2: Promise.all (параллельное выполнение)

async function loadAllUsers() {
  const promises = urls.map(url => fetchUserData(url));
  const usersData = await Promise.all(promises);
  console.log('All users loaded:', usersData);
}

Если вам не нужно дожидаться каждого запроса по отдельности, а важна только конечная точка "все данные загружены", используйте Promise.all. Он запускает все запросы параллельно и ждёт, пока все они завершатся. Это быстрее, но требует осторожности: если один запрос упадёт с ошибкой, упадёт весь Promise.all.

Способ 3: Reduce с аккумулятором Promise (последовательное выполнение)

async function loadAllUsers() {
  await urls.reduce(async (previousPromise, url) => {
    await previousPromise;
    const userData = await fetchUserData(url);
    console.log('User loaded:', userData);
  }, Promise.resolve());
  console.log('All users loaded!');
}

Это более продвинутый подход, который вручную строит цепочку Promise. Каждый следующий запрос начинается только после завершения предыдущего. Используйте этот метод, если вам нужно строго последовательное выполнение, но по какой-то причине вы не хотите использовать цикл for...of.

Вывод

Запомните главное правило: forEach не работает с async/await. Всегда используйте for...of для последовательного выполнения или Promise.all для параллельного. Выбор зависит от вашей задачи:

• Если важен порядок выполнения и каждый следующий запрос зависит от предыдущего — используйте for...of.
• Если запросы независимы и нужно максимально быстро получить все данные — используйте Promise.all.

async function asyncForEach(array, callback) {
  for (let index = 0; index < array.length; index++) {
    await callback(array[index], index, array);
  }
}

// Использование:
async function loadAllUsers() {
  await asyncForEach(urls, async (url) => {
    const userData = await fetchUserData(url);
    console.log('User loaded:', userData);
  });
  console.log('All users loaded!');
}