【JavaScript】async/await 异步详解

在 Angular 中，async 关键字用于界说异步函数，通常与 await 一起使用来处置惩罚 Promise。这使得异步代码看起来更像同步代码，从而更轻易明确和维护。
根本用法

• 界说异步函数：使用 async 关键字。
  
• 等候 Promise 剖析：使用 await 关键字。
  

示例

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

1. // data.service.ts
2. import { Injectable } from '@angular/core';
3. import { HttpClient } from '@angular/common/http';
5. @Injectable({
6.   providedIn: 'root'
7. })
8. export class DataService {
9.   private apiUrl = 'https://api.example.com/data';
11.   constructor(private http: HttpClient) {}
13.   // 返回一个 Promise
14.   getData(): Promise<any> {
15.     return this.http.get(this.apiUrl).toPromise();
16.   }
17. }

复制代码

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

1. // app.component.ts
2. import { Component, OnInit } from '@angular/core';
3. import { DataService } from './data.service';
5. @Component({
6.   selector: 'app-root',
7.   templateUrl: './app.component.html',
8.   styleUrls: ['./app.component.css']
9. })
10. export class AppComponent implements OnInit {
11.   data: any;
13.   constructor(private dataService: DataService) {}
15.   async ngOnInit() {
16.     try {
17.       // 使用 await 等待 Promise 解析
18.       this.data = await this.dataService.getData();
19.       console.log('Data:', this.data);
20.     } catch (error) {
21.       console.error('Error fetching data:', error);
22.     }
23.   }
24. }

复制代码

表明

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

注意事项

• 错误处置惩罚：使用 try...catch 块来处置惩罚大概的错误。
  
• 性能：async 和 await 不会壅闭主线程，因此不会影响用户体验。
  
• 可读性：使用 async 和 await 可以使异步代码更易读和维护。
  

通过这种方式，你可以在 Angular 中更方便地处置惩罚异步使用。