Handling multiple http responses one by one in Angular 6

Question

Actually, i have 15 http requests which are send to the API. I want to handle the responses one by one and print a response when the request end.

Service side :

    findOneByOne(): Promise<any> {
    const promises = [];

    this.getCardsPath().forEach(element => {
        promises.push(this.getPromises(element));
    });
    return Promise.all(promises)
        .then((res) => res)
        .catch(err => err);
}

getPromises(str: String): Promise<any> {
    return this.requester.obtain({
        restUrl: "/administration/" + str,
        method: RequestMethod.Get
    })
        .toPromise()
        .then(res => this.checkInfoService(res.json()))
        .catch(err => err);
}

Component side :

display() {
            this.dashboardInfoService.findOneByOne()
            .then((res) => {
                const tab = [];
                for (let i = 0; i < res.length; i++) {
                    tab.push(res[i][0]);
                }
                this.findPaths(tab);
                this.loadItems(tab);
            })
            .catch((err: any) => {
                if (environment.debugLevel >= 3) console.error(err);
            });
}

I'm a begginer in Angular, so i don't really know how to deal with multiple promises.

thanks in advance for your assistance :)

Answer 1

Try this :

findOneByOne() {
  const calls = this.getCardsPath().map(el => this.getPromises(el));
  forkJoin(calls).subscribe(responses => {...});
}

responses will contain every response, ranging from the first call to the last one : responses[0] will be the response for the first element, and so on.