angular - 具有 Angular http 请求的异步管道的好处

Question

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

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

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

但是，根据我的理解，angular HTTP 会自动取消订阅可观察对象。因此，异步管道实际上并没有达到预期目的，因为即使没有异步管道，可观察对象也会自动取消订阅。

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

示例实现:

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

async pipe is used for auto unsubscribing observer, or else you need to unsubscribe manually

他们可能的意思是，如果您将一个可观察对象分配给一个类属性:

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

class Comp {
  o = original;

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

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

对原始可观察对象的订阅将被释放——异步管道将有效地调用 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);
    }

So, async pipe actually did not serve the intended purpose here as the observable will auto unsubscribe even without async pipe.

Is there any other reason why need to use async pipe here in this use case?

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

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>