Typescript foreach () с асинхронным HTTP-запросом

Question

У меня проблема с моим угловым веб-приложением.Я пытаюсь перебрать массив и каждый раз делать HTTP-запрос для получения идентификатора для Module, который является объектом:
{name:string, charge:string} Как только я обновил каждый модуль с новым свойством id,Я хочу сделать кое-что с этими идентификаторами.Для этого мне нужны все идентификаторы и я не могу обработать каждый Module индивидуально.Как мне этого добиться?Я знаю, поскольку функция http.get() в Angular является асинхронной, я не могу просто вставить свой код после цикла foreach().

Вот мой код:

ngOnInit() {
let fit = parseFit(megafit.default.fit);
fit.modules.forEach(Module => {
  this.http.get(`https://esi.tech.ccp.is/v2/search/?categories=inventory_type&search=${Module.name}&strict=true`)
  .subscribe((data:any) => {
    Module.id = data.inventory_type
  })
});
//Do smth. with all the IDs 

}

С уважением,
Ян

Answer 1

Для этого вам понадобятся некоторые операторы RxJS.

Используйте из , чтобы сделать Module[] до Observable<Module>, затем перенаправьте поток в mergeMap ивыполнить запрос API.Используйте , коснитесь , чтобы изменить свой объект-модуль с результатом из API, и, наконец, используйте массив, чтобы собрать ответы.Подпишитесь на поток, чтобы выполнить действие, которое вы захотите выполнять после обработки всех модулей.

пример:

from(fit.modules).pipe(
    mergeMap(module => this.http.get(...).pipe(
        tap(apiResponse => module.id = apiResponse.inventory_type)
    )),
    toArray()
).subscribe(allResponses => {
    // do your action
});

Answer 2

Используйте обещания вместо подписчиков

ngOnInit() {
let fit = parseFit(megafit.default.fit);
const jarOfPromises =[];
fit.modules.forEach(Module => {
jarOfPromises.push(
  this.http.get(`https://esi.tech.ccp.is/v2/search/?categories=inventory_type&search=${Module.name}&strict=true`)
  .toPromise())
});

Promise.all(jarOfPromises).then(results=>{
/** your code **/
});

Имейте в виду, я написал это в своем мобильном телефоне ?