await 是 JavaScript 异步编程里面的关键字,必须搭配 async 函数一起使用,作用是等待一个 Promise 对象完成状态变更,在等待期间不会阻塞主线程,等到 Promise 得到成功或者失败结果之后,才继续执行 await 后面的代码,它的核心价值就是把异步代码写成接近同步代码的书写形式,降低回调嵌套的代码复杂度,在前端开发 Node.js 后端开发场景广泛使用,await 后面可以传入 Promise 对象,也可以传入普通值,如果传入普通值,await 会直接把这个值返回,不会额外等待,理解 await 一定要记住硬性规则,await 不能脱离 async 函数单独书写,这是语法层面的强制要求。
核心运行原理
异步执行逻辑
JavaScript 是单线程运行模型,原本异步操作依靠回调或者 then 链式调用处理,await 会暂停当前 async 函数内部的执行流程,把控制权交还给主线程,主线程可以继续处理其他任务,当 Promise 状态变为 resolved 之后,事件循环恢复这个 async 函数的执行,拿到 resolve 返回的值赋值给变量,如果 Promise 变成 rejected 状态,await 会抛出异常,需要搭配 try catch 捕获错误。
await 与 Promise 对比表
表格
| 项目 | await | Promise then |
|---|---|---|
| 书写风格 | 类同步写法 | 链式调用写法 |
| 所属语法 | async 函数专属关键字 | Promise 对象原生方法 |
| 错误处理 | 搭配 try catch | 搭配 catch 回调 |
| 可读性 | 多层异步逻辑可读性更高 | 多层嵌套会形成链式长代码 |
基础使用步骤
第一步,定义 async 函数,在函数声明前面添加 async 关键字,创建可以使用 await 的函数作用域。
第二步,在 async 函数内部,编写 await,后面跟上需要等待的 Promise 对象,比如接口请求 Promise。
第三步,把 await 返回的结果赋值给变量,用来接收 Promise resolve 传递的数据。
第四步,使用 try catch 包裹 await 代码块,捕获 Promise rejected 抛出的异常。
第五步,调用这个 async 函数,执行内部异步流程,等待所有 await 任务按顺序执行完成。
进阶使用要点
- 串行执行:多个 await 依次书写,上一个 await 完成之后才执行下一个,适合任务存在前后依赖的场景
- 并行执行:使用 Promise.all 包裹多个 Promise,再统一 await,多个任务同时发起,等待全部完成,提升执行效率
- 返回值特性:async 函数本身默认返回 Promise,函数内部 return 的值,会自动包装成 resolved 状态的 Promise
代码基础结构说明
async function 函数名
{
try
{
const 结果 = await Promise 任务
后续代码
}
catch (err)
{
异常处理代码
}
}
总结,await 是 async 函数内部等待 Promise 的关键字,实现非阻塞等待,让异步代码拥有同步代码的阅读体验,使用的时候必须遵守 async 搭配规则,根据业务选择串行或者并行等待模式,配合 try catch 完成异常捕获,是现代 JS 开发的核心语法。
【相关 FAQ】
问题 1,await 可以不在 async 函数里面使用吗
回答 1,await 不可以不在 async 函数里面使用,这是 JS 语法强制要求,只有 async 函数内部才允许书写 await 关键字,脱离 async 会触发语法报错。
问题 2,await 等待 Promise 失败之后会发生什么
回答 2,await 等待 Promise 失败之后会抛出异常,需要使用 try catch 捕获这个异常,否则会中断当前 async 函数后续代码执行。
问题 3,await 能不能实现并行等待
回答 3,await 可以实现并行等待,把多个 Promise 放入 Promise.all,再对 Promise.all 执行 await,多个异步任务同时运行,全部结束之后统一获取结果。
问题 4,await 后面不是 Promise 会怎么样
回答 4,await 后面如果不是 Promise 而是普通值,await 会直接返回这个原始值,不会进行等待,相当于直接取值。
【免责申明】
本文内容仅为前端编程语法科普讲解,不同 JS 运行环境对 await 语法支持版本存在差异,语法标准以 ECMAScript 官方规范为准,不构成项目开发强制编码规范。


