当前位置 : 主页 > 网页制作 > HTTP/TCP >

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

来源:互联网 收集:自由互联 发布时间:2021-06-16
很多角度教程都建议使用异步管道来自动取消显示observable. 他们声称: 异步管道用于自动取消订阅观察者,否则您需要手动取消订阅 他们做了什么: 他们使用angular http来调用REST api作为
很多角度教程都建议使用异步管道来自动取消显示observable.

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

他们做了什么:
他们使用angular http来调用REST api作为异步管道的示例.

但是,根据我的理解,角度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>

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

他们可能意味着如果你将一个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);
    }

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>
网友评论