Обработка нескольких http ответов по одному в Angular 6

Question

На самом деле у меня есть 15 http запросов, которые отправляются в API.Я хочу обработать ответы по одному и распечатать ответ по окончании запроса.

Сторона обслуживания:

    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);
}

Сторона компонента:

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 'Я новичок в Angular, поэтому я не знаю, как справиться с несколькими обещаниями.

Заранее спасибо за вашу помощь:)

Answer 1

Попробуйте это:

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

responses будет содержать каждый ответ, начиная от первого вызова до последнего: responses[0] будет ответом для первого элемента и так далее.

Answer 2

Вы можете использовать async / await

пример запроса API

export function getData(data) {
  return of(data)
    .pipe(delay(2000))
    .toPromise()
}

компонент

  async display() {
    let first = await getData('first call');
    console.log(first);

    let second = await getData('second call')
    console.log(second)
  }

Вам необходимо пометить методы с помощью async, чтобы использовать await и преобразовать любое наблюдаемое в promise в качестве примера запроса API

demo

Answer 3

Вы можете использовать zip-оператор Observable, где вы можете сжать все наши 15 вызовов API и получить ответ в массиве в том порядке, в котором они были заархивированы.

Подробнее о почтовом операторе: https://www.learnrxjs.io/operators/combination/zip.html