Rxjs 的 defer 函数 - 从实际例子理解它的用途

前端

2023-10-22 05:43:52

什么是 defer 函数？

defer 函数接收一个输入参数，类型为一个工厂函数。输出为一个 Observable 对象。当 Observable 对象被订阅时，工厂函数才会被调用，并且工厂函数的返回值将作为 Observable 对象的元素被发出。

这种延迟评估机制可以让我们在订阅 Observable 对象之前执行一些操作，例如：

获取最新的数据
执行异步操作
根据条件创建不同的 Observable 对象

defer 函数的实际例子

为了更好地理解 defer 函数的用法，我们来看一个实际的例子。假设我们有一个 Angular 应用，需要获取服务器上的数据。我们希望在组件被初始化时获取数据，但我们不希望在组件被创建时就发送网络请求。

可以使用 defer 函数来实现延迟评估。首先，我们需要创建一个工厂函数，该函数返回一个 Observable 对象。这个 Observable 对象将负责获取服务器上的数据。

const getData = () => {
  return Observable.create(observer => {
    // 发送网络请求获取数据
    $.ajax({
      url: 'https://example.com/data.json',
      success: data => {
        // 将数据发出到 Observable 对象
        observer.next(data);
        observer.complete();
      },
      error: error => {
        // 将错误发出到 Observable 对象
        observer.error(error);
      }
    });
  });
};

然后，可以在组件中使用 defer 函数来获取数据。

@Component({
  selector: 'my-component',
  template: `<p>{{ data | async }}</p>`
})
export class MyComponent {
  data: Observable<any>;

  constructor() {
    this.data = Rx.Observable.defer(getData);
  }
}

当组件被初始化时，defer 函数不会立即调用 getData 函数。只有当组件中的模板订阅 data Observable 对象时，getData 函数才会被调用，并且数据才会被获取。