Angular 顺序 HTTP Rest 请求

Question

我在 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方法。我想将逻辑保留在 fetchSingleMedia 本身

现在，如果我必须顺序地向fetchSingleMedia方法发出多个请求，我需要如何修改fetchSingleMedia方法和调用它的方式？也许使用 async/await/promise 或 rxjs?

编辑：

使用 concat，在收到第一个响应之前发送第二个请求。我希望在收到第一个请求的响应后进行第二个请求

Answer 1

使用 concat 按顺序运行一组可观察值。

来自the docs：

Subscribe to observables in order as previous completes

首先构建您的可观察对象数组，然后运行在 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
  );
}

请注意，如果您想忽略错误，则需要处理各个可观察对象的错误。我已经展示了一种非常简单的方法来做到这一点。

演示：https://stackblitz.com/edit/angular-mhrxha

Angular 顺序 HTTP Rest 请求

Angular Sequential HTTP Rest request

http

rxjs

angular

angular-httpclient