当前位置：首页 > article >正文

【Angular】async详解

article 2024/11/28 3:56:57

在 Angular 中，async 关键字用于定义异步函数，通常与 await 一起使用来处理 Promise。这使得异步代码看起来更像同步代码，从而更容易理解和维护。

基本用法

定义异步函数：使用 async 关键字。
等待 Promise 解析：使用 await 关键字。

示例

假设你有一个服务 DataService，它从 API 获取数据：

// data.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private apiUrl = 'https://api.example.com/data';

  constructor(private http: HttpClient) {}

  // 返回一个 Promise
  getData(): Promise<any> {
    return this.http.get(this.apiUrl).toPromise();
  }
}

在组件中使用 async 和 await 来调用这个服务：

// app.component.ts
import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  data: any;

  constructor(private dataService: DataService) {}

  async ngOnInit() {
    try {
      // 使用 await 等待 Promise 解析
      this.data = await this.dataService.getData();
      console.log('Data:', this.data);
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  }
}

解释

定义异步函数：
- 在 AppComponent 的 ngOnInit 生命周期钩子中，使用 async 关键字定义一个异步函数。
等待 Promise 解析：
- 使用 await 关键字等待 this.dataService.getData() 返回的 Promise 解析。
- 如果 Promise 被解析，this.data 将被赋值为解析后的数据。
- 如果 Promise 被拒绝，catch 块将捕获错误并打印到控制台。