使用Promise.all获取JSON数据为空，如何正确打印数据数组？

问题原因 #

• 你直接打印的x是未完成的Promise对象，异步操作尚未结束，因此无法看到实际返回的数据。
• 既然已经注入了Angular的HttpClient，混用原生fetch既没必要，也不符合Angular的最佳实践。

方案一：修正原Promise写法 #

需要等待Promise完成后再打印数据，可通过两种方式实现：

requests = [
  'data/products.json',
  'data/categories.json',
];

constructor(private _http: HttpClient) {
  // 方式1：在then回调中处理结果
  Promise.all(this.requests.map(url => fetch(url)))
    .then(resList => Promise.all(resList.map(res => {
      // 先校验请求是否成功
      if (!res.ok) throw new Error(`请求失败：${res.status}`);
      return res.json();
    })))
    .then(dataArray => {
      console.log(dataArray); // 此处打印最终的数组数据
    })
    .catch(err => console.error('请求出错：', err));

  // 方式2：用async/await（通过立即执行函数包裹，避免constructor直接用async）
  (async () => {
    try {
      const resList = await Promise.all(this.requests.map(url => fetch(url)));
      const dataArray = await Promise.all(resList.map(res => {
        if (!res.ok) throw new Error(`请求失败：${res.status}`);
        return res.json();
      }));
      console.log(dataArray);
    } catch (err) {
      console.error('请求出错：', err);
    }
  })();
}

方案二：使用Angular HttpClient（推荐） #

利用RxJS的forkJoin实现并行请求，更贴合Angular框架的使用逻辑：

import { forkJoin } from 'rxjs';

requests = [
  'data/products.json',
  'data/categories.json',
];

constructor(private _http: HttpClient) {
  // 将每个请求转为Observable，通过forkJoin并行执行
  const requestObservables = this.requests.map(url => this._http.get(url));
  
  forkJoin(requestObservables).subscribe({
    next: (dataArray) => {
      console.log(dataArray); // 此处获取两个JSON数据组成的数组
    },
    error: (err) => {
      console.error('请求出错：', err);
    }
  });
}

关键说明 #

• 异步操作（Promise/Observable）必须等待完成后才能获取有效数据，不能直接打印未完成的异步对象。
• Angular项目中优先使用HttpClient，它自带拦截器、统一错误处理、响应自动转换等特性，比原生fetch更适配框架生态。

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