Angular rxjs: ожидание завершения для наблюдателя_1 перед созданием и подпиской на наблюдателя_2

Question

У меня есть наблюдатели. Один из наблюдателей вернет user_Id.После того, как у меня есть идентификатор пользователя, я могу создать Observant-запросы, которые получают квесты, связанные с пользователем.

Моя проблема здесь заключается в том, что я не могу создать наблюдаемые-запросы, если у меня нет user_Id.Таким образом, единственный обходной путь - это вложение подписок наблюдателя, но это кажется грязным.

Как я могу исправить это чистым способом?

let obser_user:Observable<any> = this.userWebapiService.currentApplicationUserRead();
//Can't create the second observer, I need the user_Id from observer_first
// let obser_quests:Observable<any> = this.questWebapiService.countQuestsCreatedByUser(this.applicationUser_Id_current);


obser_user.subscribe(
  (resp: IApplicationUser_vmr)=>{
    console.log("ZR resp:", resp);
    this.applicationUser_Id_current = resp.id;

    //Nested observer created. Not good.
    let obser_quests:Observable<any> = this.questWebapiService.countQuestsCreatedByUser(this.applicationUser_Id_current);
    obser_quests.subscribe(
      (resp: number)=>{
        console.log("ZR resp:", resp);
        this.countQuestsCreatedByUser = resp;
        this.totalPages = resp;
      },
      (error:any)=>{
        console.log("ZR erros:", error);
      },
      ()=>{
        console.log("ZR oservable completed.");
    });  

  },
  (error:any)=>{
    console.log("ZR erros:", error);
  },
  ()=>{
    console.log("ZR oservable completed.");
});

Answer 1

import { catchError, finalize, flatMap } from 'rxjs/operators';

const obser_user = this.userWebapiService.currentApplicationUserRead();
obser_user.pipe(
  flatMap(user => this.questWebapiService.countQuestsCreatedByUser(user.id)),
  catchError(err => {
    // this is how you should handle errors
    console.log("ZR erros:", error);
  }),
  finalize(() => {
    // this is your finally block
    console.log("ZR oservable completed.");
  }),
).subscribe((questionCount: number) => {
  console.log("ZR resp:", questionCount);
  this.countQuestsCreatedByUser = questionCount;
  this.totalPages = questionCount;
});

Надеюсь, это поможет. Я добавил, как вы должны действительно обрабатывать ошибки и, наконец, блокировать, используя catchError и finalize , соответственно. Удачи!

Answer 2

вам понадобятся операторы каналов rxJs.например, flatMap С flatMap вы можете отобразить результат одной наблюдаемой на другую наблюдаемую.

this.userWebapiService.currentApplicationUserRead().pipe(
    flatMap(user => this.questWebapiService.countQuestsCreatedByUser(user.id))
).subscribe(questsCount => {
// do something with questCount
});