Вызов подписки в цикле forEach выполняется слишком поздно
Почему журнал консоли показывает весь вывод «если» в конце?
3 elem :
else
elem :
else
elem :
else
elem :
else
2 elem :
4 if
Я ожидал результата:
elem
if
elem
else ...
Я думал, что он будет показывать «если» или «иначе» сразу после каждого «элемента»!
Вот код:
res.docs.forEach((elem) => {
console.info('elem');
if (elem.productType) {
this.Service.function(elem.productType._id).subscribe((result) => {
console.info('if');
const text = result.name;
this.marketPlaceList.push(text);
});
} else {
console.info('else');
this.marketPlaceList.push('');
}
});
выкладывай что внутри res.docs
.subscribe(), вероятно, асинхронная функция
Вы должны получить console.info('if'); из асинхронного ответа, иначе весь цикл forEach завершится, когда он начнет их регистрировать.
Простите я думал что будет понятно.. Ок Сервис угловой Сервис. а функция — это функция внутри службы. да это асинхронная функция
обратите внимание, ваш массив this.marketPlaceList будет в порядке, в котором вы не ожидаете
Асинхронная часть - это проблема. Как видно из вывода, ваши случаи if, которые являются асинхронными, обрабатываются после всех остальных случаев. Как сказал @JaromandaX, this.marketPlaceList будет в порядке, которого вы не ожидаете, эта проблема также вызвана вашим асинхронным дизайном.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Поскольку наблюдаемый объект генерирует события асинхронно, ваш цикл forEach завершится до того, как будет выполнен любой обратный вызов .subscribe.
Вы можете решить эту проблему, превратив наблюдаемое в обещание и await-ing его. Чтобы await работал, вам нужна функция async, поэтому оберните свой код в такую функцию и измените цикл forEach на цикл for:
(async () => { // Async wrapper
for (const elem of res.docs) { // Use for-loop
console.info('elem');
if (elem.productType) {
// Convert observable to promise, and await
const result = await this.Service.function(elem.productType._id).toPromise();
console.info('if');
const text = result.name;
this.marketPlaceList.push(text);
} else {
console.info('else');
this.marketPlaceList.push('');
}
}
)(); // execute immediately
Не забудьте также дождаться самой внешней функции async (или использовать then на ней), когда вам нужно, чтобы массив this.marketPlaceList был полностью заполнен.
Полностью зависит от содержания
res.docs, не показанного в посте. Кроме того, еслиServiceявляется асинхронным... Подождите! Есть ли уServiceметод с именемfunction..?