在Angular rxjs中,什么时候应该使用`pipe` vs`map` [英] In Angular rxjs when should I use `pipe` vs `map`

查看:226
本文介绍了在Angular rxjs中,什么时候应该使用`pipe` vs`map`的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我对pipe运算符有点困惑,而不是仅仅链接map.下面的两个示例在功能上是否等效?管道功能的目的或优势是什么?

const name = ajax
  .getJSON<{ name: string }>("/api/employees/alice")
  .pipe(
    retry(3, 1000),
    map(employee => employee.name),
    catchError(error => of(null))
  );

const name = ajax
  .getJSON<{ name: string }>("/api/employees/alice")
  .let(retry(3, 1000))
  .map(employee => employee.name)
  .catch(error => Rx.Observable.of(null));

解决方案

使用pipe的新"方式称为可释放运算符

从5.5版开始,我们已经发布了可移植运算符",可以在rxjs/operators中进行访问(请注意,复数形式的运算符").与rxjs/add/operator/*中的"patch"运算符相比,这些方法是仅引入所需运算符的更好方法.

补丁操作符存在一些问题.他们还可以确保从代码生成的捆绑包较小.还有其他优点,请参见文档很好地涵盖了它. >

尽管您的2个代码示例在功能上等效,但要回答另一个问题.另外,您应尽可能使用Pipeable运算符而不是Patch运算符.


摘录自文档(出于完整性考虑, )

修补的点链运算符的问题是:

  1. 任何导入修补程序运算符的库都会对该库的所有使用者增加Observable.prototype,从而产生盲目依赖.如果该库删除了它们的用法,它们将在不知不觉中破坏其他所有人.使用管道技术时,您必须将所需的运算符导入使用它们的每个文件中.
  2. 直接修补到原型上的运算符不能通过汇总或webpack之类的工具摇晃".可管道运算符将像直接从模块中引入的函数一样.
  3. 通过任何类型的构建工具或lint规则都无法可靠地检测到正在应用程序中导入的未使用的运算符.这意味着您可以导入scan,但是停止使用它,并且它仍被添加到您的输出包中.对于可管道运算符,如果您不使用它,则可以使用皮棉规则为您选择它.
  4. 功能组成很棒.建立您自己的自定义运算符变得非常容易,现在它们可以正常工作,就像rxjs中的所有其他运算符一样.您无需再扩展Observable或覆盖lift.

I'm a bit confused by the pipe operator vs just chaining map. Are both of the examples below functionally equivalent? What is the purpose or advantage of the pipe function?

const name = ajax
  .getJSON<{ name: string }>("/api/employees/alice")
  .pipe(
    retry(3, 1000),
    map(employee => employee.name),
    catchError(error => of(null))
  );

const name = ajax
  .getJSON<{ name: string }>("/api/employees/alice")
  .let(retry(3, 1000))
  .map(employee => employee.name)
  .catch(error => Rx.Observable.of(null));

解决方案

The "new" way, using pipe, is called Lettable Operators Pipeable Operators. The "old" way, where you chain operators, is called using "patch operators".

Starting in version 5.5 we have shipped "pipeable operators", which can be accessed in rxjs/operators (notice the pluralized "operators"). These are meant to be a better approach for pulling in just the operators you need than the "patch" operators found in rxjs/add/operator/*.

There were some problems with the patch operators. They can also ensure that your produced bundle from your code is smaller. There are other advantages as well, see the documentation which fairly well covers it.

To answer your other question though your 2 code samples are functionally equivalent. Also you should use Pipeable Operators over Patch Operators whenever possible.


From the documentation (for completeness)

Problems with the patched operators for dot-chaining are:

  1. Any library that imports a patch operator will augment the Observable.prototype for all consumers of that library, creating blind dependencies. If the library removes their usage, they unknowingly break everyone else. With pipeables, you have to import the operators you need into each file you use them in.
  2. Operators patched directly onto the prototype are not "tree-shakeable" by tools like rollup or webpack. Pipeable operators will be as they are just functions pulled in from modules directly.
  3. Unused operators that are being imported in apps cannot be detected reliably by any sort of build tooling or lint rule. That means that you might import scan, but stop using it, and it's still being added to your output bundle. With pipeable operators, if you're not using it, a lint rule can pick it up for you.
  4. Functional composition is awesome. Building your own custom operators becomes much, much easier, and now they work and look just like all other operators from rxjs. You don't need to extend Observable or override lift anymore.

这篇关于在Angular rxjs中,什么时候应该使用`pipe` vs`map`的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆