Question

许多角度教程都建议使用异步管道来自动取消显示可观察的内容。

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

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

但是，根据我的理解，angular 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;

然后用另一个可观察的

更新该属性

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);
    }

因此，async管道实际上并没有达到预期的目的   即使没有异步管道，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>

Answer 2

如果直接在模板中使用observable，则只需要异步管道。因此，异步管道的要点是在模板中使用observable，并且自动取消订阅会带来额外的好处。

所以要么

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

或

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

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

2 个答案: