Angular中如何等待异步方法返回响应后再执行后续代码

你遇到的核心问题是异步操作的执行顺序逻辑：testing方法里的HTTP请求是异步任务，当你直接调用this.testing('iphone')时，JavaScript不会等待这个请求完成，而是立刻执行后面的this.result.push('test2')，这就导致了test2出现在API返回数据之前的情况。

好在你已经把HTTP请求包装成了Promise，只需要用async/await来正确等待异步操作完成即可，具体修改步骤如下：

1. 改造test方法为异步方法 #

在test方法前加上async关键字，这样就能在方法内部使用await来暂停执行，直到testing的异步任务完成：

async test() {
  this.result.push('test1');
  // 等待testing的API请求完成后，再执行后续代码
  await this.testing('iphone');
  this.result.push('test2');
}

2. （可选）简化testing方法 #

你的testing方法已经借助toPromise()把Observable转换成了Promise，其实不需要手动再包裹一层Promise，直接返回转换后的Promise即可，代码会更简洁：

testing(q: string) {
  let url = `${this.apiServer}?term=${q}&media=music&limit=20`;
  return this.http.get(url).toPromise().then(
    (res: any) => {
      // 用forEach比map更合适，因为我们不需要返回新数组，只需要遍历添加元素
      res.results.forEach((item: any) => {
        this.result.push(item.kind);
      });
      return res;
    }, err => {
      console.error(err);
      throw err; // 抛出错误，方便外部捕获处理
    }
  );
}

修改后的完整代码 #

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: "app-home",
  templateUrl: "./home.component.html",
  styleUrls: ["./home.component.scss"]
})
export class HomeComponent implements OnInit {
  apiServer: string = 'https://itunes.apple.com/search';
  result: string[] = [];

  constructor(private http: HttpClient) { }

  ngOnInit(): void {
    this.test();
  }

  async test() {
    this.result.push('test1');
    await this.testing('iphone');
    this.result.push('test2');
  }

  testing(q: string) {
    let url = `${this.apiServer}?term=${q}&media=music&limit=20`;
    return this.http.get(url).toPromise().then(
      (res: any) => {
        res.results.forEach((item: any) => {
          this.result.push(item.kind);
        });
        return res;
      }, err => {
        console.error(err);
        throw err;
      }
    );
  }
}

为什么这样能解决问题？ #

• async标记的方法会自动返回一个Promise，内部的await会暂停方法执行，直到后面的Promise状态变为resolved（也就是API请求完成并返回数据）。
• 这样test2就会在API数据全部被push到result数组之后再添加，完全符合你期望的顺序：test1 → API返回的动态数据 → test2。

补充一点：Angular官方更推荐使用RxJS Observable处理异步操作，如果之后想优化，也可以把testing改成返回Observable，然后用await this.testing('iphone').toPromise()或者直接通过subscribe处理，但你当前的场景用Promise+async/await已经完全能解决问题啦。

内容的提问来源于stack exchange，提问作者Jagadeesh