如何对 HttpClient.get 返回的 Observable 实现副作用？

Question

有人知道如何在 angular 的 HttpClient.get 方法返回的观察者上使用 RxJS do 运算符吗？

版本：

angular: 5.2.1
rxjs: 5.5.6

使用这个版本的 angular 我不能这样做:

import { HttpClient } from '@angular/common/http';

...

constructor(
  private http: HttpClient,
) { }

...

this.http.get<Item>(url)
  .do(res => console.log(JSON.stringify(res)))
  .share();

相反，我必须添加带有管道的新步骤。我可以使用 switchMap、map 或 share，但我不知道如何使用 do。

我发现我可以做到 import { _do } from 'rxjs/operator/do';，但是当我尝试这样使用它时：

this.http.get<Item>(url)
  .pipe(_do(res => console.log(JSON.stringify(res)))

或者像这样：

const observable = this.http.get<Item>(url);
observable.pipe(_do(observable, res => console.log(JSON.stringify(res)}));

我遇到错误：

[ts] The 'this' context of type 'void' is not assignable to method's 'this' of type 'Observable<{}>'.

Answer 1

我在的帮助下修复了它。

其实我输入错了。此代码有效：

import 'rxjs/add/operator/do';

...

this.http.get<Item>(url)
  .do(res => console.log(JSON.stringify(res))

Answer 2

正如 pipeable operators 文档所解释的，pipeable do 与其他几个一起重命名为 tap。这样做是为了避免与保留的 JavaScript 关键字发生冲突。

管道运算符应该作为

导入

import { tap } from 'rxjs/operators/tap';

请注意，管道运算符位于 rxjs/operators/...，而 rxjs/operator/... 导入用于修补 Observable.prototype。

不存在会阻止 do 运算符在某些 Angular 版本中使用的问题。两种导入样式都受支持且有效，只要开发人员了解补丁运算符和管道运算符之间存在某些差异，使得后者在某些情况下更可取。它们在 documentation page:

上有解释

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.

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.

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.

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.

如何对 HttpClient.get 返回的 Observable 实现副作用？

How to implement side effect on Observable retuned by HttpClient.get?

javascript

observers

angular

angular5