RXJS：管道可观察条件

Question

我post请求在我的网站上创建团队并请求为我的团队上传头像。

在团队创建表单中有用于头像上传的字段。

用户提交表单后，正在发送创建请求，在这里我需要将头像上传请求通过管道传递给它，并使用从第一个（团队创建）请求返回给我的服务器。但仅当头像不为空时（如果用户上传）。

所以我想要这样的东西（this.team 是 TeamService）：

    this.team.createTeam(teamRequest)
    .pipe(
        flatMap(next => this.team.uploadAvatar(next.uuid, avatar)), // if avatar !== null
        catchError(() => {
            this.onError();
            return EMPTY;
        })
    ).subscribe(next => {
        enter code here...
    });

Answer 1

只需使用 filter 运算符，如下所示：

this.team.createTeam(teamRequest)
  .pipe(
    filter(() => avatar),
    flatMap(next => this.team.uploadAvatar(next.uuid, avatar)),
    catchError(() => {
      this.onError();
      return EMPTY;
    })
  )
  .subscribe(next => {
    enter code here...
});

Answer 2

你能不能像这样坚持

this.team.createTeam(teamRequest)
  .pipe(
    flatMap(next => avatar ? this.team.uploadAvatar(next.uuid, avatar) : EMPTY),
    catchError(() => {
      this.onError();
      return EMPTY;
    })
  )
  .subscribe(next => {
    enter code here...
});

RXJS：管道可观察条件

RXJS: pipe observable on condition

reactive-programming

observable

rxjs

angular