RxJS 中的管道是什么？

Question

我想我有基本概念，但有一些晦涩难懂

所以总的来说，这就是我使用 Observable 的方式：

 observable.subscribe(x => {

})

如果我想过滤数据，我可以使用这个：

 import { first, last, map, reduce, find, skipWhile } from 'rxjs/operators';
observable.pipe(
    map(x => {return x}),
    first()
    ).subscribe(x => {

})

我也可以这样做：

 import 'rxjs/add/operator/map';
import 'rxjs/add/operator/first';

observable.map(x => {return x}).first().subscribe(x => {

})

所以我的问题是：

1. 有什么区别？
2. 如果没有区别，为什么函数 pipe 存在？
3. 为什么这些功能需要不同的导入？

原文由 enno.void 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

“pipeable”（以前的“lettable”）运算符是自 RxJS 5.5 以来使用运算符 的当前和推荐方式。

我强烈建议您阅读 有关可管道操作符的官方文档

主要区别在于，制作自定义运算符更容易，并且在不改变某些全局 Observable 对象的情况下，如果两个不同的方想要创建同名的运算符，则可能会发生冲突。

为每个运算符使用单独的 import 语句 'rxjs/add/operator/first' 是制作更小的应用程序包的一种方法。通过只导入你需要的操作符而不是整个 RxJS 库，你可以显着减少总包的大小。但是编译器无法知道您是否导入 'rxjs/add/operator/first' 因为您在代码中确实需要它，或者您只是在重构代码时忘记将其删除。这是使用管道运算符的优点之一，其中未使用的导入会被自动忽略。

原文由 martin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

有什么区别？ 正如您在示例中看到的，主要区别在于提高源代码的可读性。您的示例中只有两个函数，但想象一下如果有十几个函数？然后它会像

function1().function2().function3().function4()

它真的变得丑陋且难以阅读，尤其是当您填充函数内部时。除此之外，某些编辑器（如 Visual Studio 代码）不允许超过 140 行长度。但如果它像下面这样。

 Observable.pipe(
function1(),
function2(),
function3(),
function4()
)

这大大提高了可读性。

如果没有区别，为什么存在功能管道？ PIPE() 函数的目的是将所有接受并返回 observable 的函数 _集中在一起_。它最初需要一个可观察对象，然后在其中使用的每个函数在整个 pipe() 函数中使用该可观察对象。

第一个函数获取 observable，处理它，修改它的值，然后传递给下一个函数，然后下一个函数获取第一个函数的输出 observable，处理它，然后传递给下一个函数，然后继续直到所有函数在 pipe() 函数内部使用那个 observable，最后你有了处理后的 observable。最后，您可以使用 subscribe() 函数执行 observable 以从中提取值。请记住，原始 observable 中的值没有改变。！！

为什么这些功能需要不同的导入？ 导入取决于在 rxjs 包中指定函数的位置。它是这样的。所有模块都存储在 Angular 的 node_modules 文件夹中。从“模块”导入{类}；

我们以下面的代码为例。我刚刚在stackblitz中写了它。因此，不会自动生成任何内容，也不会从其他地方复制任何内容。当您也可以阅读时，我看不出复制 rxjs 文档中所述内容的意义。我假设您在这里问了这个问题，因为您不了解文档。

• 有从各个模块导入的管道、可观察的地图类。

• 在类的主体中，我使用了代码中看到的 Pipe() 函数。

• Of() 函数返回一个 observable，它在订阅时按顺序发出数字。

• Observable 尚未订阅。

• 当你像 Observable.pipe() 一样使用它时，pipe() 函数使用给定的 Observable 作为输入。

• 第一个函数 map() 函数使用该 Observable，对其进行处理，将处理后的 Observable 返回给 pipe() 函数，

• 然后将处理后的 Observable 提供给下一个函数（如果有的话），

• 就这样继续下去，直到所有函数都处理了 Observable，

• 最后 Observable 由 pipe() 函数返回给一个变量，在下面的例子中是它的 obs。

现在 Observable 中的事情是，只要观察者没有订阅它，它就不会发出任何值。所以我使用 subscribe() 函数订阅了这个 Observable，然后我一订阅它。 of() 函数开始发射值，然后通过 pipe() 函数进行处理，最后得到最终结果，例如从 of() 函数中取出 1，在 map() 函数中加 1，并返回。您可以将该值作为 subscribe(function ( argument ) {}) 函数内部的参数获取。

如果要打印，则用作

subscribe( function (argument) {
    console.log(argument)
   }
)

     import { Component, OnInit } from '@angular/core';
    import { pipe } from 'rxjs';
    import { Observable, of } from 'rxjs';
    import { map } from 'rxjs/operators';

    @Component({
      selector: 'my-app',
      templateUrl: './app.component.html',
      styleUrls: [ './app.component.css' ]
    })
    export class AppComponent implements OnInit  {

      obs = of(1,2,3).pipe(
      map(x => x + 1),
      );

      constructor() { }

      ngOnInit(){
        this.obs.subscribe(value => console.log(value))
      }
    }

https://stackblitz.com/edit/angular-ivy-plifkg

原文由 Don Dilanga 发布，翻译遵循 CC BY-SA 4.0 许可协议