Angular5.2.1+RxJS5.5.6中如何给HttpClient.get的Observable加副作用？

你遇到的问题其实是RxJS 5.5版本引入的pipeable操作符带来的变化——从这个版本开始，RxJS推荐用pipe()方法来组合操作符，而不是直接链式调用实例方法（比如原来的.do()）。

正确的实现步骤： #

1. 正确导入pipeable版本的do操作符
   因为do是JavaScript的关键字，所以我们需要给它起个别名（比如tap，这也是RxJS 6之后do的新名字，提前用这个别名还能方便后续升级）：

   import { do as tap } from 'rxjs/operators';
   // 同时share也需要从operators导入
   import { share } from 'rxjs/operators';
   

2. 在pipe中使用操作符
   把tap（也就是原来的do）和share一起放进pipe()方法里，而不是链式调用：

   import { HttpClient } from '@angular/common/http';
   import { do as tap } from 'rxjs/operators';
   import { share } from 'rxjs/operators';
   
   // 假设Item是你的接口类型
   interface Item { /* ... */ }
   
   export class YourComponent {
     constructor(private http: HttpClient) {}
   
     fetchData(url: string) {
       return this.http.get<Item>(url)
         .pipe(
           tap(res => console.log(JSON.stringify(res))), // 这里就是原来的do操作符的作用
           share()
         );
     }
   }
   

为什么你之前的写法报错？ #

你导入的_do来自rxjs/operator/do，这是RxJS内部的原型操作符实现，并不是专门为pipe()设计的pipeable函数，直接放进pipe()里会导致上下文绑定错误，也就是你看到的'this' context of type 'void' is not assignable报错。

另外要注意：Observable是惰性的，必须调用.subscribe()之后才会真正发起HTTP请求哦！

内容的提问来源于stack exchange，提问作者German Lashevich