Angular解析JSON为数组返回空数组 异步等待服务响应仍无效

你遇到的空数组问题本质是异步时序错误：async/await和RxJS Observable的混用方式完全错误，所有加了await的位置都没有真正等待异步操作执行完成，洗牌逻辑运行时，卡牌数据还没从接口返回、也没赋值到组件的cards变量上，自然拿不到内容。
具体错误点：

• 服务层getJSON方法错误添加async关键字，返回值被自动包装成了Promise<Observable>，你在组件里await拿到的只是Observable实例本身，不是接口返回的数据。当你给这个Observable加subscribe发起请求时，fetchCards方法就已经执行结束返回了，根本不会等接口响应、循环创建卡牌的逻辑跑完。
• 组件的getCards方法虽然标记为async，但内部直接调用subscribe、没有返回Promise，await this.getCards()不会等subscribe里给this.cards赋值的逻辑执行，就直接往下运行打印、洗牌逻辑，此时this.cards还是初始的空值。
• 控制台打印看起来数组后面有值，是浏览器开发者工具的懒解析机制：你在控制台点开打印的数组条目时，异步操作早就执行完、数组已经被填充了，但代码执行到洗牌那一行的时间点，数组确实是空的，所以洗牌逻辑根本没有处理到任何卡牌。
• 问题对应的浏览器控制台运行结果：
  

不要无意义混用Promise和Observable，要么全程用RxJS的操作符控制异步顺序，要么把Observable转成Promise配合async/await使用，确保前一步异步逻辑完全执行完再走下一步。

1. 修正服务层代码，去掉不必要的async包装，直接返回Observable：

// 服务层代码
private extractData(res: any) {
  return res || {};
}

// 移除async关键字，直接返回http请求生成的Observable
public getJSON(url: string): Observable<any> {
  return this.http.get<any>(url).pipe(
    map(this.extractData),
    catchError(this.handleError)
  );
}

// 注意：如果CARDS是服务内存储卡牌的变量，要确保create方法会更新这个变量，否则getCards永远拿不到你新增的卡牌
getCards(): Observable<Card[]> {
  return of(CARDS);
}

2. 修正组件层异步逻辑，等数据完全加载完成再执行洗牌：

// 先导入转Promise的工具方法，Angular 13+用firstValueFrom，低版本可以直接用Observable的.toPromise()
import { firstValueFrom } from 'rxjs';

async getCards() {
  // 等待卡牌数据返回后再赋值，不要直接subscribe不处理等待逻辑
  this.cards = await firstValueFrom(this.cardService.getCards()) as Card[];
}

shuffleArray(anArray: any[]): any[] {
  console.log('待洗牌数组长度', anArray.length);
  return anArray.map(a => [Math.random(), a])
    .sort((a, b) => a[0] - b[0])
    .map(a => a[1]);
}

async fetchCards() {
  let counter = 0;
  // 等待接口响应拿到数据后，再循环创建卡牌
  const data = await firstValueFrom(this.cardService.getJSON(this.url));
  try {
    while(data['posts'][counter]['file']['url']) {
      const newCard: Card = {
        id: 0,
        pairId: counter,
        state: 'default',
        shape: "s",
        picture: data['posts'][counter]['file']['url']
      }
      this.cardService.create(newCard);
      this.cardService.create(newCard);
      counter++;
    }
  } catch (err) {
    console.error('卡牌数据解析异常', err);
  }
}

async ngOnInit(): Promise<void> {
  // 此时await会真正等待卡牌拉取、赋值全部完成
  await this.fetchCards();
  await this.getCards();
  console.log('加载完成的卡牌列表', this.cards);
  this.cards = this.shuffleArray(this.cards);
  console.log('洗牌完成的卡牌列表', this.cards);
}

• 补充说明：如果不想用async/await，也可以全程用RxJS的switchMap、concatMap等操作符把拉取接口、获取卡牌、洗牌的逻辑串成Observable流，在最终的subscribe里赋值即可，核心原则是不要在没有处理完成态的情况下随便嵌套subscribe，很容易出现时序问题。

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