Не используйте async await с forEach в javascript

Если вы используете async await в цикле, то используйте for…of или for(…;….;…) вместо forEach.

Потому что, Array.prototype.forEach не может быть использован в асинхронном коде или не был разработан для этого. Я не знал этого до того, как столкнулся со странным поведением цикла forEach в асинхронном коде.

Давайте посмотрим на примере кода:

const fruits=["mango","apple","banana","grape"];

fruits.forEach(async(fruit)=>{
  console.log(await Promise.resolve("I am first promise"));
  console.log(await Promise.resolve("I am second promise"));
});
Вход в полноэкранный режим Выход из полноэкранного режима

Итак, в приведенном выше фрагменте кода мы перебираем фрукты и пытаемся разрешить два обещания одно за другим с помощью ключевого слова await, чтобы выполнить их одно за другим.

На самом деле мы ожидаем следующего результата:

"I am first promise"
"I am second promise"
"I am first promise"
"I am second promise"
"I am first promise"
"I am second promise"
"I am first promise"
"I am second promise"
Войти в полноэкранный режим Выход из полноэкранного режима

Но на самом деле мы получаем следующий результат:

"I am first promise"
"I am first promise"
"I am first promise"
"I am first promise"
"I am second promise"
"I am second promise"
"I am second promise"
"I am second promise"
Вход в полноэкранный режим Выход из полноэкранного режима

Это происходит потому, что forEach не дожидается разрешения каждого обещания.

Причины такой проблемы:
(a) forEach не был разработан с учетом async await
(b) forEach принимает функцию обратного вызова, которая не возвращает ни одного обещания.

N.B. Мы можем использовать map, reduce, flatMap и reduceRight с async await, но не forEach и filter.

Оцените статью
Procodings.ru
Добавить комментарий