Как отправить много запросов, но обработать результат с первого, перед отправкой второго, используя angular и Observables

Question

У меня 500 пользователей с первого запроса this.userService.getAll (), и для каждого пользователя я запрашиваю 2 других свойства (списка), которые у них есть. К сожалению, он отправляет все 1000 запросов одновременно, и сначала он не обрабатывает первый запрос, чем второй, и так далее. Я хочу, чтобы результат для первого пользователя и его свойства P1 отображался сразу на странице. Я вижу, что все запросы обрабатываются после их отправки, потому что логи из "console.log ('request one result');" печатаются после логов по запросу. Я использую библиотеку rxjs и httpClient от angular. Приложение с угловой 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; });
      }
    })

Answer 1

Вы можете использовать concat () для последовательной подписки на наблюдаемые.Concat будет выдавать значения из каждой наблюдаемой строки подряд.Один за другим, когда наблюдаемое завершается.

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