为何从.then()返回数据始终得到Promise对象而非实际数据？

核心原因 #

fetch是异步操作，它的返回值以及链式调用.then()后的结果始终是Promise对象，而非直接的响应数据。你代码里外部的console.log会在Promise完成前就执行，所以打印的是未resolved的Promise，而.then()内部的打印是在数据就绪后才执行，所以能拿到正确结果。

解决方案一：使用async/await（推荐，代码更直观） #

用async标记函数，内部用await等待Promise完成，让异步代码看起来像同步逻辑，所有需要使用数据的操作都要放在async函数内部或者通过.then()处理返回的Promise：

async function getGameData() {
  try {
    // 等待fetch请求完成
    const response = await fetch("api/fullGameData");
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    // 等待响应体解析为JSON
    const json = await response.json();
    const fullGameData = json.fullGameData;
    
    console.log("fullGameData= " + fullGameData);
    // 在这里写所有需要使用fullGameData的逻辑
    // 比如渲染页面、调用处理函数等
    handleGameData(fullGameData);
    
    return fullGameData;
  } catch (error) {
    console.error('获取游戏数据失败:', error);
  }
}

// 调用异步函数
getGameData();

// 或者通过then获取返回的数据
getGameData().then(data => {
  // 这里也能使用数据
});

function handleGameData(data) {
  // 处理数据的具体逻辑
}

解决方案二：链式调用.then()到底 #

如果环境不支持async/await（比如旧浏览器），可以把所有依赖数据的逻辑放到最后一个.then()回调里：

fetch("api/fullGameData")
  .then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    return response.json();
  })
  .then((json) => {
    const fullGameData = json.fullGameData;
    console.log("fullGameData= " + fullGameData);
    // 在这里执行所有需要用fullGameData的逻辑
    handleGameData(fullGameData);
  })
  .catch(error => {
    console.error('获取游戏数据失败:', error);
  });

function handleGameData(data) {
  // 处理数据的具体逻辑
}

为什么你的原代码不行？ #

你尝试把.then()的结果重新赋值给fullGameData，但.then()本身返回的还是Promise，所以变量依然是Promise对象。而JavaScript异步操作不会阻塞主线程，外部的console.log会先于.then()回调执行，自然拿不到最终数据。

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