Angular `ngOnInit` 中的异步等待

typescript

Angular 中的 ngOnInit 是一个生命周期钩子函数，它在组件被创建后立即调用。在这个钩子函数中，我们可以执行一些初始化的操作，比如获取数据、订阅事件等。有时候，我们需要在 ngOnInit 中进行异步操作或等待某个条件满足后再执行其他逻辑。在本文中，我们将探讨如何在 ngOnInit 中处理异步/等待，并提供一些示例代码。

## 异步操作

在 Angular 中，我们经常需要与后端服务进行数据交互。这些数据请求通常是异步的，因为我们不能确切知道数据何时会返回。在 ngOnInit 中处理异步操作的常见做法是使用 Observable 和 subscribe 方法。

使用 Observable

Observable 是 Angular 中用于处理异步数据流的工具。我们可以通过创建一个 Observable 对象来发起异步请求，并使用 subscribe 方法来订阅这个数据流的结果。

typescript
import { Observable } from 'rxJS';
ngOnInit(): void {
  this.getData().subscribe((data) => {
    // 异步请求返回的数据
    console.log(data);
    // 在这里执行其他逻辑
  });
}
getData(): Observable<any> {
  // 发起异步请求
  // 返回一个 Observable 对象
}

上述代码中，我们在 getData 方法中发起了一个异步请求，并返回了一个 Observable 对象。在 ngOnInit 中，我们通过调用 subscribe 方法来订阅这个 Observable 对象，并处理返回的数据。一旦数据返回，我们就可以在 subscribe 的回调函数中执行其他逻辑。

使用 async/awAIt

除了使用 Observable，我们还可以使用 JavaScript 中的 async/awAIt 语法来处理异步操作。async/awAIt 提供了一种更简洁的方式来编写异步代码。

typescript
async ngOnInit() {
  const data = awAIt this.getData();
  // 异步请求返回的数据
  console.log(data);
  // 在这里执行其他逻辑
}
async getData(): Promise<any> {
  // 发起异步请求
  // 返回一个 Promise 对象
}

上述代码中，我们将 ngOnInit 声明为 async 方法，并在 getData 方法前添加 async 关键字。这样就可以使用 awAIt 关键字来等待异步请求的结果。一旦数据返回，我们就可以将结果赋值给 data 变量，并在之后的代码中进行处理。

## 等待条件满足

除了处理异步操作，有时候我们还需要等待某个条件满足后再执行其他逻辑。在 ngOnInit 中等待条件满足的常见做法是使用 setTimeout 或者 setInterval 函数。

使用 setTimeout

setTimeout 函数可以用来在一定的延迟后执行一段代码。我们可以在 ngOnInit 中使用 setTimeout 来等待某个条件满足后再执行其他逻辑。

typescript
ngOnInit() {
  setTimeout(() => {
    // 等待 2 秒后执行的代码
    // 在这里执行其他逻辑
  }, 2000);
}

上述代码中，我们使用 setTimeout 函数将要执行的代码包裹并设置延迟时间为 2000 毫秒（2 秒）。这样，就会在等待 2 秒后执行这段代码，并可以在其中执行其他逻辑。

使用 setInterval

setInterval 函数可以用来按照一定的时间间隔重复执行一段代码。我们可以在 ngOnInit 中使用 setInterval 来等待某个条件满足后再执行其他逻辑。

typescript
ngOnInit() {
  const interval = setInterval(() => {
    if (condition) {
      // 条件满足时执行的代码
      // 在这里执行其他逻辑
      clearInterval(interval);
    }
  }, 1000);
}

上述代码中，我们创建了一个 interval 变量来存储 setInterval 返回的定时器 ID。在定时器的回调函数中，我们可以检查某个条件是否满足。一旦条件满足，我们执行相应的代码，并通过 clearInterval 方法停止定时器的执行。

##

在本文中，我们了解了如何在 Angular 的 ngOnInit 中处理异步/等待。我们介绍了使用 Observable 和 subscribe 方法处理异步操作的方法，以及使用 async/awAIt 语法来简化异步代码的写法。此外，我们还介绍了使用 setTimeout 和 setInterval 函数来等待条件满足后执行其他逻辑的方法。这些技术能够帮助我们更好地处理 ngOnInit 中的异步/等待操作，使我们的代码更加健壮和可维护。

示例代码：

typescript
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxJS';
@Component({
  selector: 'app-example',
  template: <code>
    <div *ngIf="data$ | async as data">
      <!-- 显示异步请求返回的数据 -->
      {{ data }}
    </div>
  </code>
})
export class ExampleComponent implements OnInit {
  data$: Observable<any>;
  ngOnInit(): void {
    this.data$ = this.getData();
  }
  getData(): Observable<any> {
    // 模拟异步请求
    return new Observable((observer) => {
      setTimeout(() => {
        observer.next('Hello, World!');
        observer.complete();
      }, 2000);
    });
  }
}

在上述示例代码中，我们创建了一个 ExampleComponent 组件，通过 data$ 变量来存储异步请求返回的数据。在组件的模板中，我们使用 async 管道来订阅 data$，并在数据返回后显示到页面上。这样，我们就可以在 ngOnInit 中处理异步操作，并将返回的数据展示到页面上。

参考资料：

- [Angular 官方文档](https://angular.io/)