Angular Последовательный запрос HTTP Rest - PullRequest
Новая
       26

Angular Последовательный запрос HTTP Rest

1 голос
/ 03 марта 2020

У меня следующий код в Angular 8: 

fetchMedia() {
    this.mediaDetails.forEach(entry => {
        this.fetchSingleMedia(entry); // NEED TO MAKE THIS SEQUENTIAL
    }
  });
}

fetchSingleMedia(entry) {

  this.mediaService.getMedia(entry).subscribe(
    (data) => {
       // MY LOGIC HERE
    },
    error => {}
  );
}

Метод fetchSingleMedia используется и другими частями кода. Я хочу сохранить Logi c в самой fetchSingleMedia

Теперь, если мне нужно последовательно сделать несколько запросов к методу fetchSingleMedia, как мне нужно изменить метод fetchSingleMedia и способ его вызова? ? возможно, используя async / await / обещание или rx js?

Edit:

При concat второй запрос отправляется до получения первого ответа. Я хочу, чтобы второй запрос go после получения ответа первого запроса

1 Ответ

5 голосов
/ 03 марта 2020

Используйте concat для последовательного запуска массива наблюдаемых.

Из документов :

Подписаться на наблюдаемые в порядке, как предыдущие завершают

Сначала создайте свой массив наблюдаемых, а затем последовательно запускайте их в concat. 

fetchMedia() {
  const observables = this.mediaDetails.map(entry => {
    return this.fetchSingleMedia(entry);
  });

  concat(...observables).subscribe(singleMedia => {
    console.log(singleMedia);
  },
  error => {
  });
}

fetchSingleMedia(entry): Observable<any> {
  return this.mediaService.getMedia(entry).pipe(
    catchError(() => of('Error')), // TODO: return simple error result here, 
    tap(mediaEntry => console.log(mediaEntry)) // TODO: any processing here
  );
}

Обратите внимание, что вам придется обрабатывать ошибки в отдельных наблюдаемых, если вы хотите игнорировать ошибки. Я показал очень простой c способ сделать это.

DEMO: https://stackblitz.com/edit/angular-mhrxha

...