Angular 顺序 HTTP Rest 请求答案

【问题标题】：Angular Sequential HTTP Rest requestAngular 顺序 HTTP Rest 请求
【发布时间】：2020-03-03 06:41:40
【问题描述】：

我在 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，在收到第一个响应之前发送第二个请求。我希望在收到第一个请求的响应后进行第二个请求

【问题讨论】：

顺序排列是什么意思？你是说同步的吗？
响应式编程以订阅结束...不要在 fetchSingleMedia 中订阅并在 fetchMedia 中使用类似 forkJoin 的东西。呃，请不要仅仅因为你还不完全了解 RxJS 就使用 Promise，这会导致代码丑陋，混合和匹配 Promise 和 observables。
@Shravan 我的意思是一个接一个循环
@user5155835 如果一次获取失败，您希望发生什么？为什么一个接一个（如果是为了保护后端，请求之间的延迟就足够了吗？）？
@AndrewAllen 即使第一次失败，也应该提出第二次请求。就是这样，第二个请求应该在第一个请求完成后发出

标签： angular http rxjs angular-httpclient

【解决方案1】：

使用concat 顺序运行一组可观察对象。

来自the docs：

按照之前完成的顺序订阅 observables

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

【讨论】：

还有物化和非物化（高级 RxJS）用于细粒度控制，并允许其余可观察对象不受错误阻碍地通过流。
即使第一次请求失败，第二次请求还是会发出的，对吧？
@user5155835 您可以根据需要进行设置。即使第一个请求失败，您是否希望所有请求都运行？
是的，即使任何请求失败，所有请求都应该运行
这就是我的例子要做的。在我的 stackblitz 中，我从一个整数序列中设置了一个 concat。 #2 引发错误，但您仍会看到数字 3+。