TypeScript foreach () с асинхронным HTTP-запросом
У меня проблема с моим угловым веб-приложением.
Я пытаюсь перебрать массив и каждый раз делать 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
}
С уважением,
Янв
Ответы 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 **/
});
Имейте в виду, что я написал это на свой мобильный телефон ?
Это просто способ достичь того, о чем он просит. В этом случае я думаю, что проще использовать обещания вместо более сложных операторов RXJS.
Для этого вам понадобятся некоторые операторы RxJS.
Используйте от, чтобы преобразовать Module[] в Observable<Module>, затем направьте поток в mergeMap и выполните запрос api. Используйте кран, чтобы изменить объект вашего модуля на результат API и, наконец, использовать toArray для сбора ответов. Подпишитесь на поток, чтобы выполнить действие, которое вы хотите выполнить, когда все модули будут обработаны.
пример:
from(fit.modules).pipe(
mergeMap(module => this.http.get(...).pipe(
tap(apiResponse => module.id = apiResponse.inventory_type)
)),
toArray()
).subscribe(allResponses => {
// do your action
});
почему OP должен использовать обещания вместо наблюдаемых?