具有角度http请求的异步管道的好处

Question

很多角度教程都建议使用异步管道来自动取消显示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>

Answer 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>