JavaScript异步函数返回Pending Promise而非预期值的原因及处理方法咨询

嘿，我来帮你捋清楚这个问题！你遇到的情况其实是async函数的标准行为——所有async函数天生就会返回一个Promise对象，不管你在函数里return的是什么具体值，都会被自动包装成Promise的resolve结果。所以你直接调用getData()的时候，异步请求还在后台跑着呢，函数自然就先返回一个处于<pending>（等待中）状态的Promise啦，这时候它还没拿到真正的返回值呢。

给你两种最常用的正确处理方式：

方法1：用await关键字（推荐，写法更直观） #

await的作用就是等待Promise完成，拿到它resolve后的实际值，但要注意：await只能在async函数内部使用，或者在现代浏览器/Node.js的顶层作用域里直接用（不用包裹额外函数）。

修改你的代码示例：

async function getData() {
  const response = await fetch('https://api.example.com/data');
  const result = await response.json();
  return result;
}

// 把处理逻辑放在一个async函数里
async function processData() {
  try {
    const data = await getData();
    console.log(data); // 这里就能拿到你要的实际数据啦
  } catch (error) {
    // 千万别忘了处理异步操作可能出现的错误，比如请求失败、解析出错
    console.error('获取数据时出问题了：', error);
  }
}
processData();

// 要是你的环境支持顶层await（比如现代浏览器、Node.js 14.8+），也可以直接这么写：
// try {
//   const data = await getData();
//   console.log(data);
// } catch (error) {
//   console.error('出错了：', error);
// }

方法2：用Promise的.then()回调 #

如果你暂时不想用async/await的语法，也可以用Promise原生的.then()方法来处理resolve后的结果，同时用.catch()捕获错误：

async function getData() {
  const response = await fetch('https://api.example.com/data');
  const result = await response.json();
  return result;
}

getData()
  .then(data => {
    console.log(data); // 这里拿到实际返回值
  })
  .catch(error => {
    console.error('获取数据失败：', error);
  });

最后再敲个重点：不管用哪种方式，都一定要处理错误哦！异步操作很容易因为网络问题、接口报错等原因失败，忽略错误的话遇到问题会很难排查~

内容来源于stack exchange