带有角度 http 请求的异步管道的好处答案

【问题标题】：Benefits of async pipe with angular http request带有角度 http 请求的异步管道的好处
【发布时间】：2018-03-04 06:38:42
【问题描述】：

很多角度教程都建议使用异步管道来自动取消订阅 observable。

他们声称的：
异步管道用于自动取消订阅观察者，否则您需要手动取消订阅

他们做了什么：
他们使用 Angular http 调用 REST api 作为 async 管道的示例。

但是，据我了解，角度 HTTP 会自动取消订阅 observable。因此，异步管道实际上并没有达到预期目的，因为即使没有异步管道，observable 也会自动取消订阅。

在这个用例中还有什么其他原因需要在这里使用异步管道吗？

示例实现：

getUserList() {
    return this.http.get(apiUrl);
}

this.getUserList().subscribe(user => {
    this.userList = user;
});

<div *ngFor="let user of userlist | async">
    {{ user?.name }}
    {{ user?.email }}
</div>

【问题讨论】：

标签： angular ionic-framework ionic2 rxjs

【解决方案1】：

异步管道用于自动取消订阅观察者，否则您需要手动退订

他们可能的意思是，如果你将一个 observable 分配给一个类属性：

import { interval } from 'rxjs/observable/interval';
let original = interval(1000);

class Comp {
  o = original;

然后用另一个 observable 更新该属性

constructor() {
   setTimeout(() => {
      this.o = interval(500);
   }, 5000);
}

对原始 observable 的订阅将被释放 - 异步管道将有效地调用 original.unsubscribe()。这可以在来源中看到：

@Pipe({name: 'async', pure: false})
export class AsyncPipe implements OnDestroy, PipeTransform {
  ...

  transform(obj: Observable<any>|Promise<any>|null|undefined): any {
    ....

    if (obj !== this._obj) {
      this._dispose();   <-------------------------
      return this.transform(obj as any);
    }

所以，异步管道实际上并没有达到预期的目的，因为即使没有异步管道，observable 也会自动取消订阅。

在此使用中是否有任何其他原因需要在此处使用异步管道案例？

是的，他们将它用于不同的目的 - 为自己节省您展示的方法中所需的一些编码：

getUserList() {
    return this.http.get(apiUrl);
}

// this part can be eliminated if you use ` let user of getUserList() | async`
this.getUserList().subscribe(user => {
    this.userList = user;
});

<div *ngFor="let user of userlist">   <---- no need to use `async` here since `userlist` contains values, not observable
    {{ user?.name }}
    {{ user?.email }}
</div>

【讨论】：

【解决方案2】：

如果您直接在模板中使用可观察对象，则只需要异步管道。因此，异步管道的要点是在模板中使用可观察对象，并且自动取消订阅是额外的好处。

所以

<div *ngFor="let user of userlist">
</div>

或

<div *ngFor="let user of getUserList() | async">
</div>

【讨论】：