带有角度 http 请求的异步管道的好处 [英] Benefits of async pipe with angular http request

问题描述

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

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

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

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

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

示例实现:

getUserList() {返回 this.http.get(apiUrl);}this.getUserList().subscribe(user => {this.userList = 用户；});<div *ngFor="让用户列表的用户|异步">{{ 用户名 }}{{ 用户?.email }}</div>

解决方案

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

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

import { interval } from 'rxjs/observable/interval';让原始=间隔(1000)；类比较{o = 原始；

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

constructor() {设置超时(() => {this.o = 间隔(500)；}, 5000);}

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

@Pipe({name: 'async', pure: false})导出类 AsyncPipe 实现 OnDestroy、PipeTransform {...变换(obj:可观察的<any>|Promise<any>|null|undefined):任何{……如果(obj！== this._obj){this._dispose();<-------------返回 this.transform(obj as any);}

<块引用>

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

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

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

getUserList() {返回 this.http.get(apiUrl);}//如果你使用 `let user of getUserList() | 这部分可以去掉异步`this.getUserList().subscribe(user => {this.userList = 用户；});<div *ngFor="让用户列表的用户"><---- 此处无需使用 `async`，因为 `userlist` 包含值，不可观察{{ 用户名 }}{{ 用户?.email }}</div>

A lot of angular tutorial has suggest to use async pipe for auto unsubsribing observable.

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

What they did:
They use angular http to call REST api as an example for async pipe.

However, from my understanding, angular HTTP auto unsubscribe the observable. 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?

Sample implementation:

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

what they probably mean is that if you assign an observable to a class property:

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

class Comp {
  o = original;

and then later update that property with another observable

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

the subscription to the original observable will be disposed - async pipe will effectively call original.unsubscribe(). This can be seen in the sources:

@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?

Yes, they used it for a different purpose - to save themselves some coding required in the approach you showed:

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>

这篇关于带有角度 http 请求的异步管道的好处的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！