RxJS 实战：异步数据加载取代 ngOnChanges 监听变化

在前端开发中，我们经常会需要在组件内监听数据的变化，从而更新视图。而在 Angular 中，我们可以使用 ngOnChanges 钩子函数来实现这一功能。

但是在某些情况下，使用 ngOnChanges 可能会导致性能问题或者难以维护。这时候，我们可以使用 RxJS 来实现异步数据加载，从而替代 ngOnChanges 监听变化。

RxJS 简介

RxJS 是一个响应式编程库，可以让我们通过使用 Observable、操作符和调度器等工具，实现流式数据处理、异步编程和错误处理等功能。

使用 RxJS 不仅能够使我们的代码更加简洁和可读，还可以支持多种数据来源，如事件、HTTP 请求和WebSocket 等。

如果你还不了解 RxJS，可以参考官方文档进行学习：RxJS 官方文档

使用 RxJS 实现异步数据加载

在 Angular 中，我们可以使用 RxJS 中的 fromPromise 方法将 Promise 对象转化为 Observable 对象，从而实现异步数据加载。

import { fromPromise } from 'rxjs';

// 在组件中定义一个数据 Observable 对象
private data$ = fromPromise(this.service.getData());

在上面的代码中，我们将 this.service.getData() 方法返回的 Promise 对象，通过 fromPromise 转化为 Observable 对象，并且将结果保存在了一个名为 data$ 的数据 Observable 对象中。

接着，我们可以使用 RxJS 操作符，如 map 和 filter 等，对这个数据 Observable 进行处理，从而实现数据的过滤、转换和合并等功能。

import { fromPromise } from 'rxjs';
import { map } from 'rxjs/operators';

// 在组件中定义一个数据 Observable 对象
private data$ = fromPromise(this.service.getData())
  .pipe(
    map(res => res.filter(item => item.type === 'book'))
  );

在上面的代码中，我们使用了 map 操作符对 this.service.getData() 方法返回的数据进行过滤，只保留了其中 type 为 'book' 的数据。

接下来，我们可以在组件的模板中使用 AsyncPipe，从而将异步数据加载和视图更新的流程绑定在一起，避免手动调用 ngOnChanges 等监听数据变化的方式。

<ng-container *ngIf="data$ | async as data">
  <ul>
    <li *ngFor="let item of data">{{ item.title }}</li>
  </ul>
</ng-container>

在上面的代码中，我们使用 AsyncPipe 将 data$ 中的异步数据加载到模板中，并且使用 *ngIf 确保数据加载完成后才进行视图更新。

总结

使用 RxJS 可以在 Angular 中实现异步数据加载，并且避免手动调用 ngOnChanges 等监听数据变化的方式。同时，通过使用 RxJS 操作符和调度器等工具，我们可以实现更加灵活和高效的数据处理方式。

在实际开发中，我们应该根据具体的业务需求，选择合适的数据加载和数据处理方式，从而实现高效、可靠和可维护的前端代码。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64eaf4aef6b2d6eab35a9816