如何在Promise外部访问fetch请求返回的API数据？

这是个非常典型的异步操作时序问题，咱们先搞明白为什么你的外部console.log拿不到数据，再给你几个可行的解决方案。

问题根源：JavaScript的异步执行机制 #

你遇到的核心问题是Promise是异步操作，代码的执行顺序不是从上到下同步完成的：

1. 你定义api1、api2、apiData后，Promise.all()会发起异步请求，但浏览器不会等着请求完成，而是直接往下执行后面的console.log(JSON.stringify(apiData, null, 4))——这时候API请求还没结束，apiData还是你初始化的空对象结构，自然拿不到数据。
2. 只有当API请求完成后，Promise.all()的.then()回调才会执行，这时候apiData才会被赋值，所以里面的console.log能看到完整数据。

你以为return apiData能让外部拿到，其实这个return是.then()回调的返回值，它会成为Promise.all().then()这个新Promise的resolved结果，而不是直接“跳出”Promise把数据给到外部同步代码。

解决方案：让代码等待异步操作完成 #

方案1：把数据处理逻辑放到.then()回调里 #

最直接的方式就是，所有需要用到完整apiData的代码，都放到.then()回调内部，或者调用一个专门的处理函数：

var api1 = fetch('api.example1.com/search').then(response => response.json());
var api2 = fetch('api.example2.com/search').then(response => response.json());
var apiData = {"api1":{},"api2":{}};

Promise.all([api1,api2]).then(function(values){
  apiData.api1 = values[0];
  apiData.api2 = values[1];
  console.log(JSON.stringify(apiData, null, 4)); // 这里能拿到完整数据
  // 把后续处理逻辑放在这里，或者调用函数传递数据
  handleApiData(apiData);
});

// 专门处理数据的函数
function handleApiData(data) {
  // 在这里做你需要的操作，比如渲染页面、计算等
  console.log("处理后的数据：", JSON.stringify(data, null, 4));
}

方案2：用async/await让代码更像同步写法 #

ES2017引入的async/await语法可以让异步代码看起来更简洁直观，你需要把代码包裹在一个async函数里：

async function fetchAndProcessData() {
  // 同时发起两个API请求，等待全部完成
  const [api1Response, api2Response] = await Promise.all([
    fetch('api.example1.com/search'),
    fetch('api.example2.com/search')
  ]);
  
  // 解析JSON数据
  const api1Data = await api1Response.json();
  const api2Data = await api2Response.json();
  
  // 组装成你需要的对象
  const apiData = {"api1": api1Data, "api2": api2Data};
  
  console.log(JSON.stringify(apiData, null, 4)); // 这里能拿到完整数据
  return apiData;
}

// 调用async函数，它返回的是一个Promise，所以要通过.then()或者await获取结果
fetchAndProcessData().then(finalData => {
  console.log("外部拿到的数据：", JSON.stringify(finalData, null, 4));
});

// 如果在另一个async函数里，还可以直接用await：
// async function useFinalData() {
//   const data = await fetchAndProcessData();
//   // 在这里使用data
// }
// useFinalData();

方案3：直接链式调用Promise获取结果 #

如果你不想用async/await，也可以直接把Promise.all()的结果保存为一个Promise对象，然后在外部通过.then()获取：

var api1 = fetch('api.example1.com/search').then(response => response.json());
var api2 = fetch('api.example2.com/search').then(response => response.json());

// 保存Promise对象
const apiDataPromise = Promise.all([api1,api2]).then(function(values){
  return {"api1": values[0], "api2": values[1]};
});

// 外部通过.then()拿到完整数据
apiDataPromise.then(apiData => {
  console.log(JSON.stringify(apiData, null, 4));
});

补充说明 #

Promise并没有你猜测的.finalise或.success方法，它的成功回调就是.then()，失败回调是.catch()，无论成功失败都会执行的是.finally()。所有异步操作的结果，都必须通过这些回调或者async/await来获取，因为JavaScript的异步机制决定了同步代码无法等待异步操作完成。

内容的提问来源于stack exchange，提问作者DT.DTDG