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

- user5155835

---

你说的“making it sequential”是什么意思？你是指同步吗？ - Shravan

响应式编程以subscribe为结束...不要在fetchSingleMedia中使用subscribe, 而是使用类似于fetchMedia中的forkJoin。呃，请不要仅仅因为您尚未完全了解RxJS而使用promises，这会导致代码混乱，混合匹配promises和observables。 - Andrew Allen

@Shravan 我的意思是在循环中一个接一个地执行。 - user5155835

@user5155835 如果一个获取失败了，你希望发生什么？为什么要一个接一个地获取（如果是为了保护后端，请求之间的延迟是否足够）？ - Andrew Allen

@user5155835，你应该接受Kurt的答案，因为它符合你的要求。 - Andrew Allen

Answer 1

使用 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
  );
}

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

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

- Kurt Hamilton

---

即使第一个请求失败了，第二个请求仍然会被发出，对吗？ - user5155835

是的，所有请求都应该运行，即使其中任何一个请求失败。 - user5155835

@user5155835 再次查看我的 StackBlitz。subscribe 正在将值推送到数组中。因此，完全可以处理发出的值并将它们推送到其他地方。 - Kurt Hamilton

@user5155835 我已经更新了我的答案和 stackblitz。这可能会产生一些奇怪的行为，但听起来它符合您的用例。 - Kurt Hamilton

@KurtHamilton 第二个请求是在不等待第一个请求的响应的情况下进行的。我想让第二个请求在收到第一个请求的响应后进行/当第一个请求失败时。 - user5155835