Angular Typescript -异步等待内部订阅

在Angular中使用TypeScript进行异步编程时，经常会遇到需要等待内部订阅的情况。这种情况通常涉及到使用Observable和subscribe方法来处理异步数据流。然而，有时我们需要等待一个异步操作完成后再继续执行后续的代码，这就需要用到async/await模式。

基础概念

Observable: 是RxJS库中的一个核心概念，它代表了一个可观察的数据流，可以发出多个值，并且可以被多次订阅。
Subscription: 当你订阅一个Observable时，你会得到一个Subscription对象，它可以用来取消订阅。
async/await: 是ES2017引入的关键字，用于简化基于Promise的异步代码的编写。

类型

在TypeScript中，async函数总是返回一个Promise，即使函数体中没有显式返回值，它也会隐式地返回一个已解决的Promise。

应用场景

当你需要按顺序执行一系列依赖于前一个异步操作结果的步骤时，async/await非常有用。例如，在Angular服务中获取数据并在组件中使用这些数据。

示例代码

假设我们有一个Angular服务，它提供了一个方法来获取用户列表：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class UserService {
  constructor(private http: HttpClient) {}

  getUsers(): Observable<any[]> {
    return this.http.get<any[]>('/api/users');
  }
}

在组件中，我们可以这样使用async/await来等待获取用户列表：

import { Component, OnInit } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app-user-list',
  template: `<ul>
               <li *ngFor="let user of users">{{ user.name }}</li>
             </ul>`
})
export class UserListComponent implements OnInit {
  users: any[] = [];

  constructor(private userService: UserService) {}

  async ngOnInit() {
    try {
      this.users = await this.getUserList();
    } catch (error) {
      console.error('Error fetching users:', error);
    }
  }

  private async getUserList(): Promise<any[]> {
    return new Promise((resolve, reject) => {
      this.userService.getUsers().subscribe(
        users => resolve(users),
        error => reject(error)
      );
    });
  }
}