代码之家 › 专栏 › 技术社区 › Urvashi

Angular Rxjs管理嵌套订阅

rxjs6 rxjs angular

0

Urvashi · 技术社区 · 2 年前

嗨,我有一个函数,它有嵌套订阅。

  public loadUser(): Observable<string> {
    return this.getUser().subscribe(
      (userResponse: any) => {
        if (userResponse) {
          this.userId = userResponse.toLowerCase();
          this.getAppSupportUsersList();
          this.getUserEntitlements().subscribe((response: any) => {
            localStorage.setItem('UserEntitlements', JSON.stringify(response));
            this.processUIEntitlements(response);
            this.getUserDetails(this.userId).subscribe((userDetails) => {
              this.userInfo = userDetails;
              this.setUserName();
            });
          });
        }
      },
      (error) => {
        console.error(error);
      }
    );
  }

我不知道我们如何才能避免订阅嵌套。有没有更好的方法可以使用重写嵌套订阅 switchMap() 或 mergeMap() ?

2 回复 | 直到 2 年前

1

2

IDK4real 2 年前

这可以用rxjs重写 switchMap 或者 map ,这取决于您希望如何处理多个请求。

如果只有最新计数,这似乎是自您写入本地存储以来指示最多的计数,请使用 switchMap 方法

public loadUser(): Observable<string> {
  return this.getUser().pipe(
    filter(val => !!val),
    switchMap(userResponse => {
      this.userId = userResponse.toLowerCase();
      this.getAppSupportUsersList();
      return this.getUserEntitlements();
    }),
    switchMap(response => {
      localStorage.setItem('UserEntitlements', JSON.stringify(response));
      this.processUIEntitlements(response);
      return this.getUserDetails(this.userId);
    }),
    .map(userDetails => {
      this.userInfo = userDetails;
      this.setUserName();
      return JSON.stringify(userDetails);
    })
  );
}

2

1

Naren Murali 2 年前

我们可以使用 switchMap ,因为我们只想连锁订阅,所以在前一个订阅完成后切换到另一个订阅。

  public loadUser(): Observable<string> {
    return this.getUser().pipe(
      switchMap((userResponse: any) => {
        if (userResponse) {
          this.userId = userResponse.toLowerCase();
          this.getAppSupportUsersList();
          return this.getUserEntitlements().pipe(
            switchMap((response: any) => {
              localStorage.setItem('UserEntitlements', JSON.stringify(response));
              this.processUIEntitlements(response);
              return this.getUserDetails(this.userId).pipe(
                tap((userDetails) => {
                  this.userInfo = userDetails;
                  this.setUserName();
                })
              )
            })
          );
        }
        return of(null);
      })
    );
  }

  callingFunction() {
      this.loadUser().subscribe({
        next: (next) => {
          console.error(next);
        },
        error: (error) => {
          console.error(error);
        }
      });
  }