Chrome扩展中fetch获取JSON字段后返回Promise而非字段值问题求助

嘿，这其实是async函数的核心特性，很多刚接触异步编程的开发者都会踩这个坑！

为什么返回的是Promise？ #

你写的async function getData()本质上永远会返回一个Promise对象——哪怕你在函数内部return resp.field（一个具体值），JavaScript也会自动把这个值包装成一个已resolved状态的Promise返回给调用者。

你看到alert和console.log能正常显示内容，是因为函数内部的await已经等待fetch请求完成，成功拿到了resp.field的值；但函数本身的返回值依然遵循async函数的规则，是Promise，而不是那个具体的字段值。

怎么拿到实际的返回值？ #

要获取resp.field的实际值，你需要用两种方式处理这个Promise：

方式1：在另一个async函数里用await调用

把调用逻辑放在async函数中，用await等待getData()的Promise完成：

async function handleData() {
  var x = await getData();
  // 这里x就是你想要的resp.field实际值了
  console.log("实际拿到的值：", x);
}
handleData();

方式2：用.then()方法处理Promise

如果你的调用场景没办法用async函数（比如在同步代码块里），可以直接用Promise的.then()回调来获取值：

getData().then(x => {
  // 这里x是resp.field的实际值
  console.log("实际拿到的值：", x);
});

简单来说，async/await只是Promise的语法糖，让异步代码看起来更像同步代码，但底层还是基于Promise机制的。所以调用async函数时，必须通过await或者.then()来提取最终的结果，直接赋值只能拿到Promise对象哦！

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