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按顺序运行可观察的阵列。

从文档：

按之前完成的顺序订阅 observables

首先构建您的 observables 数组，然后在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
  );
}

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

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