uni-app怎么使用async和await语法糖-uni-app-PHP中文网

uni-app 中 async/await 可直接使用，但需确保运行时支持；async 函数必返 Promise，uni.request 需封装为 Promise 才能 await；错误必须用 try/catch 捕获，模板事件中声明 async 无效。

uni-app怎么使用async和await语法糖

直接用，不需要额外配置 —— uni-app 基于 Vue 2/3 和现代 JavaScript 运行时（如微信小程序基础库 2.25+、H5 的 Chrome 63+、App 的 v8 引擎），原生支持 async/await，只要项目不是锁定在极老的编译目标（如 ES5 + IE11 兼容模式），就能直接写。

async 函数必须返回 Promise，否则 await 会“失效”

async 函数本质是语法糖，它强制把函数返回值包装成 Promise。如果你在 async 函数里写同步代码又不 return，调用方拿到的是一个 Promise，但逻辑上不会出错；可一旦你忘了 await，就容易误以为“执行完了”，其实只是 Promise 已创建、还没 resolve。

✅ 正确：函数体里有 await，且调用处也用了 await 或 .then()
❌ 常见错误：在 onLoad 里写了 getData()，但没加 await，导致 this.data 还是空数组就渲染了
⚠️ 注意：async function foo() { return 'ok' } 等价于 function foo() { return Promise.resolve('ok') }，不是“让函数变同步”，而是“让异步写法更线性”

await 只能等 Promise，uni.request 要先封装成 Promise

uni.request 默认是回调风格（success/fail），不能直接 await。必须先把它转成 Promise，否则会报 TypeError: Cannot await non-Thenable。

uni-app

uni-app 是基于 Vue 的跨端开发框架，适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载

推荐封装方式（放在 utils/request.js）：

export function request(options) {
  return new Promise((resolve, reject) => {
    uni.request({
      ...options,
      success: (res) => {
        if (res.statusCode >= 200 && res.statusCode  reject(err)
    })
  })
}

使用时：const data = await request({ url: '/api/user' })
别直接 await uni.request(...) —— 它返回的是 RequestTask 对象，不是 Promise

错误处理必须用 try/catch，不能只靠 .catch

await 遇到 rejected Promise 会直接抛出异常，不走 .catch 链。如果没包 try/catch，错误会上抛到最近的 errorCaptured 或直接中断执行。

❌ 错误写法：

const res = await request(...).catch(err => console.error(err))

（.catch 在 await 外，语法错误）

✅ 正确写法：

try {
  const res = await request(...)
  this.list = res
} catch (err) {
  uni.showToast({ title: '加载失败', icon: 'none' })
}

多个请求想“失败不中断”，可用 Promise.allSettled 或单独 try/catch 包裹每个 await

最常被忽略的一点：在 methods 或生命周期里声明 async 函数没问题，但 Vue 模板里绑定的事件（比如 @click="handleSubmit"）如果声明为 async，点击后函数会立即返回 Promise，而模板不会等它 resolve —— 所以表单提交这类操作，必须在函数内部用 try/catch 处理 UI 状态，不能指望模板自动 await。