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

首先构建你的 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