如何发送大量请求，但在使用 angular 和 Observables 发送第二个请求之前处理第一个请求的结果答案

【问题标题】：How to send a lot of request, but to process the result from the first, before sending the second one using angular and Observables如何发送大量请求，但在使用 angular 和 Observables 发送第二个请求之前处理第一个请求的结果
【发布时间】：2019-09-02 06:08:29
【问题描述】：

我从第一个请求 this.userService.getAll() 中获得了 500 个用户，对于每个用户，我请求他们拥有的 2 个其他属性（列表）。不幸的是，它一次发送所有 1000 个请求，并且它不首先处理第一个请求，而不是第二个请求，依此类推。我希望第一个用户及其属性 P1 的结果立即显示在页面上。我可以看到所有请求在发送后都在处理，因为来自“console.log('request one result');”的日志在请求的日志之后打印。我从 Angular 使用 rxjs 库和 httpClient。该应用程序的角度为 7。

this.userService.getAll().subscribe((data: any) => {
      this.users = data.users;
      if (data && data.users){
        data.users.forEach(user => {

            this.userService.getP1(user.id).subscribe(
            (data: any) => { 
                console.log('request one result');
                if(data) user.p1 = data.p1; });

            this.userService.getP2(user.id).subscribe(
            (data: any) => { 
                console.log('request two result');
                if(data) user.p2 = data.p2; });
      }
    })

【问题讨论】：

标签： angular rxjs observable

【解决方案1】：

您可以使用concat() 来按顺序订阅 observables。 Concat 将连续发出每个 observable 的值。当一个可观察对象完成时，一个接一个。

this.userService.getAll().subscribe((data: any) => {
      this.users = data.users;

      const observables = data.users.map(user => {
          return combineLatest(
              this.userService.getP1(user.id),
              this.userService.getP2(user.id)
          );
      });

      concat(...observables).subscribe(([dataP1, dataP2]) => {
         console.log({dataP1,dataP2});
         if(dataP1) user.p1 = dataP1.p1;
         if(dataP2) user.p2 = dataP2.p2;
      });
    });

【讨论】：