在 pipe() 中而不是直接在 subscribe() 方法中执行操作的 advantages/disadvantages 是什么？

Question

我是 Angular 的新手，我正在过滤 ID 与 JWT 负载中相同的用户。

我可以在 Observable 的 subscribe() 中这样做：

  this.route.data.subscribe((data) => {
      this.users = data.users.filter((u: User) => u.id !== +this.authService.decodedToken.nameid);
  });

我也可以在 pipe() 方法中这样做：

this.route.data
  .pipe(map(data => data.users.filter((u: User) => u.id !== +this.authService.decodedToken.nameid)))
  .subscribe((data) => {
    this.users = data;
  });

解析器代码（可能与问题无关）：

  resolve(route: ActivatedRouteSnapshot): Observable<User[]> {
        return this.userService.getUsers().pipe(
            catchError(error => {
                this.alertify.error('Problem retrieving data');
                this.router.navigate(['/home']);
                return of(null);
            })
        );
    }

现在我为什么要使用 pipe() 方法而不是直接在 subscribe() 方法中过滤？在这种情况下使用 pipe() 有什么优点或缺点吗？这两种方法中哪一种是传统的 Angular 方法？

我认为 pipe() 会慢一点，因为它首先映射然后过滤。

Answer 1

它创建了一个可以发出你想要的值的可观察对象。在 Angular 中，我们经常使用异步管道，因此我们不必管理订阅，因此 map 在创建和观察进入异步管道的数据是我们要在模板中使用的数据时很有用

users$ = this.route.data
  .pipe(map(data => data.users.filter((u: User) => u.id !== +this.authService.decodedToken.nameid)));

并使用异步管道

<ng-container *ngIf="users$ | async as users">
  {{ users | json }} users here is updated each time users$ emits a value
</ng-container>

异步管道为我们管理订阅，我们无需担心取消订阅。

这只是 RxJ 和管道的冰山一角。一旦你很好地理解了 RxJs 的基础知识，你真的应该停止学习 Angular 稍微回来。它将真正改变您构建 Angular 组件的方式。

Answer 2

现在使用 pipable 运算符，您正在进行声明式编程。如果我们在订阅中做所有事情，就会有一些陷阱

与另一个 Observable 合并变得困难。
如果你想从 observable1 获取值并将其传递给 observable2，你会做 mergeMap 还是在另一个订阅内订阅（永远不要那样做）。
您所有的逻辑现在都在一个函数中，难以阅读。

当你写 pipable 运算符时

每个函数执行一种特定的逻辑。
关注点分离
您只需订阅一次（到最终结果）
代码看起来很整洁

看例子

const obs1$ = of(1,2,3,4,5);
obs1$.pipe(filter(val => val%2 === 0), map(val => val*2).subscribe(finalValue => console.log(value)

把所有这些都写在 subscribe 里看起来很糟糕！希望这有帮助

在 pipe() 中而不是直接在 subscribe() 方法中执行操作的 advantages/disadvantages 是什么？

What are the advantages/disadvantages of performing operations in pipe() rather than directly in subscribe() method?

observable

rxjs

angular

rxjs-pipeable-operators

rxjs6