在 Angular 和 RxJS 中一一执行方法答案

【问题标题】：Execute methods one by one in Angular and RxJS在 Angular 和 RxJS 中一一执行方法
【发布时间】：2021-10-19 19:56:04
【问题描述】：

this.userClient.getUser(userName)
.pipe(
    concatMap(
        user => { 
            this.user = user;
            return this.userClient.setStatus(this.user.id, 'banned');
        }
    ),
    concatMap(
        user => {
            //set property...
            return this.userClient.deleteImg(user.img);
        }
    ),
    mergeMap(
        user => {
            this.user = user;
            return this.userClient.setGroup(user.id, 'test');
        }
    )
)
.subscribe(
    user => {
        //actions
    },
    error => ...
)

我希望我的方法一个一个地打开，而不是一次全部打开。我怎样才能做到这一点？ forkJoin 是唯一的出路吗？

【问题讨论】：

您可以使用switchMap 来处理所有这三个问题。
forkJoin 不会一一完成，而是一次完成。

标签： angular typescript rxjs

【解决方案1】：

保留第一个 switchMap，然后返回一个 concat。 concat 将对您想要的三个项目进行排序。 Concat 等待一个完成，然后执行下一个，依此类推。

您可以在RxjS Concat docsconcat 上找到更多信息

this.userClient.getUser(userName)
  .pipe(
    switchMap(
      user => { 
        this.user = user;
        return concat(
            this.userClient.setStatus(this.user.id, 'banned'),
            this.userClient.deleteImg(user.img),
            this.userClient.setGroup(user.id, 'test')
        );
    }
)
)
.subscribe(
  ([user]) => {
    //actions
  },
  error => ...
)

在an episode of the Angular Show 上，他们描述了其中的一些高阶映射运算符。它可能有助于理解这些是如何工作的。

【讨论】：

【解决方案2】：

只需使用switchMap

this.userClient.getUser(userName)
.pipe(
    switchMap(
        user => { 
            this.user = user;
            return this.userClient.setStatus(this.user.id, 'banned');
        }
    ),
    switchMap(
        user => {
            //set property...
            return this.userClient.deleteImg(user.img);
        }
    ),
    switchMap(
        user => {
            this.user = user;
            return this.userClient.setGroup(user.id, 'test');
        }
    )
)
.subscribe(
    user => {
        //actions
    },
    error => ...
)

【讨论】：