Angular内置AsyncPipe解析

Posted 2021-04-26 Java码农

AsyncPipe，从名称上可以看出，这是一个异步管道。它是Angular内置的pipe。那它是用来做什么的呢，以及在什么地方用呢？

官方文档给出了这样的说明：

The async pipe subscribes to an Observable or Promise and returns the latest value it has emitted. When a new value is emitted, the async pipe marks the component to be checked for changes. When the component gets destroyed, the async pipe unsubscribes automatically to avoid potential memory leaks.

大概意思是：异步管道用来定阅Observable、Promise，返回最新值。使用异步管道标记的component会通过变更检查渲染出最新值。使用异步管道，不用担心因订阅引起的内存泄露，框架内部会在component销毁时自动取消订阅。

使用方式

在官方文档中，分别给出了Promise和Observable的例子。

AsyncPipe for Promise

@Component({
  selector: 'async-promise-pipe',
  template: `<div>
    <code>promise|async</code>: 
    <button (click)="clicked()">{{ arrived ? 'Reset' : 'Resolve' }}</button>
    <span>Wait for it... {{ greeting | async }}</span>
  </div>`
})
export class AsyncPromisePipeComponent {
  greeting: Promise<string>|null = null;
  arrived: boolean = false;

  private resolve: Function|null = null;

  constructor() { this.reset(); }

  reset() {
    this.arrived = false;
    this.greeting = new Promise<string>((resolve, reject) => { this.resolve = resolve; });
  }

  clicked() {
    if (this.arrived) {
      this.reset();
    } else {
      this.resolve !('hi there!');
      this.arrived = true;
    }
  }
}

AsyncPipe for Observable

@Component({
  selector: 'async-observable-pipe',
  template: '<div><code>observable|async</code>: Time: {{ time | async }}</div>'
})
export class AsyncObservablePipeComponent {
  time = new Observable<string>((observer: Observer<string>) => {
    setInterval(() => observer.next(new Date().toString()), 1000);
  });
}

需要注意的的Promise是ES6中包含的接口，不需要单独的引入。Observable是Rxjs库中的接口，需要单独引入：

import { Observable, Observer } from 'rxjs';

AsyncPipe配合ngIf

<div *ngIf="user$ | async as user">
  <user-profile
    [user]="user.profile">
  </user-profile>
  <user-messages
    [user]="user.messages">
  </user-messages>
</div>

user$ | async as user的意思是user$是一个Observable对象，通过AsyncPipe将最新的值赋值给变量user，这样在ngIf的作用域里，就可以直接使用订阅的最新值了。

通常约定prop$，即以$符结尾的变量来表示这个变量是一个Observable的数据源

结论

通过上面的分析，我们可以得出结论：只要是Observable肯Promise类型的数据源，我们就可以使用AsyncPipe来获得期望订阅的值。我们知道，使用HttpClient获得的数据都是Observable类型的，使用AsyncPipe就可以不再需要subscribe中来进行数据赋值了，从而使得代码更简洁。

---