使用async/await处理Promise时出现await仅在async函数中有效报错

• 错误触发点是最后一行代码const val = await calculate(2)，你的await关键字直接写在全局顶层作用域下，并没有放在被async修饰的函数内部，因此触发语法报错。
• 核心规则是*await只能在async修饰的函数内部使用，或者在支持ES模块的环境中使用顶层await*，和你等待的目标是不是async函数没有关系，要求的是await本身所在的执行上下文必须符合规则。

方案1：用自执行async函数包裹逻辑（全环境兼容） #

这是通用性最高的解法，不需要修改运行环境配置，调整后代码如下：

function getNumber(mult) {
    return new Promise((resolve, reject) => {
        resolve(10);
    }).then((val) => {
        return new Promise((resolve, reject) => {
            resolve(val * mult)
            //reject("Error");
        }).then((val2) => val2);
    }).catch((err) => {
        return err;
    })
}

const calculate = async (x) => await Promise.resolve(getNumber(x))

// 所有包含顶层await的逻辑都放入自执行async函数中
;(async () => {
  const val = await calculate(2)
  // 所有需要用到val的后续逻辑都写在该函数内部
  console.log(val) // 输出结果为20
})()

方案2：使用顶层await（仅ES模块环境可用） #

如果你的运行环境支持ES模块规范，可以直接保留原代码最后一行的写法，只需要做对应配置即可：

• 浏览器环境：给引入代码的script标签添加type="module"属性
• Node.js环境：将文件后缀改为.mjs，或者在项目package.json中添加配置项"type": "module"

方案3：用then链处理结果 #

不需要使用await，直接通过Promise原生的then方法接收异步返回值：

calculate(2).then(val => {
  // 所有需要用到val的逻辑都写在then回调中
  console.log(val)
})

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