Unexpected reserved word 'await' 小程序中使用 await 报错原因？

Question

在小程序开发中，使用 `await` 关键字时报错“Unexpected reserved word 'await'”，通常是由于 `await` 没有在 `async` 函数中使用所致。JavaScript 规定，`await` 只能在 `async` 标记的异步函数内部使用，否则会触发语法错误。例如，在普通函数或全局作用域中直接写 `await wx.request()` 将导致该错误。正确做法是将包含 `await` 的函数定义为 `async`，如 `async function getData() { await wx.request({...}) }`。此外，部分小程序工具链若未开启 ES2017 以上语法支持，也可能无法识别 `await`，需检查项目配置并确保编译设置支持 async/await。

Answer 1

小程序开发中使用 await 报错“Unexpected reserved word 'await'”的深度解析与解决方案

1. 问题现象与初步排查

在微信小程序或其他类小程序平台（如支付宝、百度智能小程序）开发过程中，开发者常遇到如下语法错误：

Unexpected reserved word 'await'

该错误通常出现在尝试使用 await 关键字调用异步 API（如 wx.request）时。例如：

function fetchData() {
    let res = await wx.request({
        url: 'https://api.example.com/data'
    });
    return res.data;
}
    

上述代码会直接触发语法错误，因为 await 被置于非 async 函数中。

2. JavaScript 异步机制基础回顾

async/await 是 ES2017（ES8）引入的异步编程语法糖，建立在 Promise 基础之上。其核心规则如下：

• await 只能在被 async 修饰的函数内部使用。
• async 函数始终返回一个 Promise 对象。
• 在非模块或非异步上下文中，无法直接使用顶层 await（除非环境支持）。

因此，修复上述错误的最简单方式是将函数标记为 async：

async function fetchData() {
    const res = await wx.request({
        url: 'https://api.example.com/data'
    });
    return res.data;
}
    

3. 小程序运行时环境限制分析

尽管现代浏览器普遍支持 async/await，但小程序运行环境依赖于宿主 App 内嵌的 JS 引擎（如微信使用的 JSCore），可能存在版本滞后问题。此外，工具链的编译配置也至关重要。

项目配置项	建议值	说明
es6: true	true	启用 ES6+ 语法支持
babel 编译	开启	将 async/await 转译为兼容代码
lib 插件	latest	确保基础库版本 ≥ 2.10.0

4. 实际开发中的常见错误场景

1. 在页面生命周期函数中直接使用 await 而未声明 async：

2. 
   Page({
       onLoad: function() {
           const data = await this.fetchData(); // ❌ 错误
       },
       async fetchData() { ... }
   })
           

3. 正确写法应为：

4. 
   onLoad: async function() {
       const data = await this.fetchData();
   }
           

5. 在普通对象方法中遗漏 async 声明。
6. 使用箭头函数时忘记前置 async：

7. () => await fetch()

8. 应改为：

9. async () => await fetch()

5. 工具链与构建配置检查流程图

graph TD
            A[出现 await 报错] --> B{是否在 async 函数内?}
            B -->|否| C[添加 async 修饰符]
            B -->|是| D{Babel 是否启用?}
            D -->|否| E[开启 babel 编译]
            D -->|是| F{基础库版本是否过低?}
            F -->|是| G[升级至 2.10.0+]
            F -->|否| H[检查 ESLint 配置]
            H --> I[确认 parserOptions.ecmaVersion >= 2017]

6. 高阶实践：封装 Promisify 工具函数

由于小程序原生 API 多为回调模式，可统一进行 Promise 化处理，便于 await 使用：

const promisify = (fn) => {
    return (args = {}) => {
        return new Promise((resolve, reject) => {
            fn({
                ...args,
                success: resolve,
                fail: reject
            })
        })
    }
}

const request = promisify(wx.request);

// 使用
async function getData() {
    const res = await request({ url: '...' });
    console.log(res);
}
    

此模式提升代码可读性与维护性，尤其适用于大型项目。