React旅行顾问APP中async函数与Promise返回值的困惑求助

核心问题：混淆了Promise对象与它的resolved值 #

你遇到的问题本质是把Promise本身和Promise成功解析后得到的值搞混了，下面分两部分拆解：

1. 为什么打印getPlacesData()的结果是object？ #

async函数确实始终返回Promise对象，但你看到的object是Promise resolved后的实际数据，不是Promise本身：

• 直接调用console.log(getPlacesData())，打印的会是一个Promise对象（类型为object，但instanceof Promise返回true）。
• 但如果用await调用，比如：

  const data = await getPlacesData();
  console.log(typeof data); // 这里打印的是API返回的object，因为await已经等待Promise完成，取出了内部的值
  

2. 为什么.then回调里打印的是object？ #

.then()方法本身确实返回一个新的Promise，但你打印的是.then回调函数的参数——也就是Promise resolved后传递过来的数据，不是.then的返回值：

// app.js的useEffect中
useEffect(() => {
  // 回调函数里的data是API返回的解析后数据
  getPlacesData().then(data => {
    console.log(typeof data); // 这里的data是Promise resolved后的object
  });

  // 打印.then的返回值，才是Promise
  const thenReturn = getPlacesData().then(data => data);
  console.log(thenReturn instanceof Promise); // true
}, []);

验证示例 #

// index.js
async function getPlacesData() {
  const res = await fetch('https://api.example.com/places');
  return res.json(); // 这里返回的JSON对象会被async自动包装成Promise
}

// 测试1：直接打印async函数的返回值（Promise）
const promiseResult = getPlacesData();
console.log(promiseResult); // 输出Promise对象，typeof是object，且instanceof Promise为true

// 测试2：用await取resolved值
(async () => {
  const data = await getPlacesData();
  console.log(data); // 输出API返回的object数据
})();

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