0

0

javascript的async与await如何使用?【教程】

夜晨

夜晨

发布时间:2026-01-31 16:11:35

|

483人浏览过

|

来源于php中文网

原创

async函数返回值总会被自动包装成Promise;await仅在async函数或模块顶层合法;await不阻塞线程,只暂停当前函数执行;错误需用try/catch捕获await表达式。

javascript的async与await如何使用?【教程】

async 函数必须返回 Promise 吗?

不是必须显式 return new Promise(),但 async 函数的返回值总会被自动包装成 Promise。比如 async function foo() { return 42; } 实际等价于返回 Promise.resolve(42);而 return Promise.reject(new Error('oops')) 会直接让调用方的 await 抛错。

常见错误:在 async 函数里忘记 await 一个 Promise,结果返回的是未等待的 Promise 对象本身,而不是它 resolve 的值。例如:

async function getData() {
  fetch('/api/user') // ❌ 忘了 await,返回的是 Promise,不是 Response
}

正确写法是:

async function getData() {
  const res = await fetch('/api/user') // ✅
  return res.json()
}

await 只能在 async 函数里用吗?

是的,顶层 await(top-level await)只在模块作用域.mjs 文件或 type="module" 的 script)中合法,在普通函数、循环、条件语句或非 async 函数内部直接写 await 都会报 SyntaxError: await is only valid in async functions and the top level modules

立即学习Java免费学习笔记(深入)”;

容易踩的坑:

  • for 循环里想逐个 await,却误写成 for (let i of arr) await doAsync(i) —— 这没问题,但若想并发执行,该用 Promise.all(arr.map(...))
  • 在箭头函数里写 () => await foo(),这非法;必须写成 async () => await foo()
  • 试图在 try/catch 外层 catch await 错误,但忘了 await 本身不抛异常,而是让 Promise reject,所以要用 try/catch 包住 await 表达式

await 会阻塞整个 JS 线程吗?

不会。await 只暂停当前 async 函数的执行,把控制权交还给事件循环,其余同步代码和微任务(如其他 Promise.then)照常运行。它不是“阻塞”,而是“暂停并让出”。

盛世企业网站管理系统1.1.2
盛世企业网站管理系统1.1.2

免费 盛世企业网站管理系统(SnSee)系统完全免费使用,无任何功能模块使用限制,在使用过程中如遇到相关问题可以去官方论坛参与讨论。开源 系统Web代码完全开源,在您使用过程中可以根据自已实际情况加以调整或修改,完全可以满足您的需求。强大且灵活 独创的多语言功能,可以直接在后台自由设定语言版本,其语言版本不限数量,可根据自已需要进行任意设置;系统各模块可在后台自由设置及开启;强大且适用的后台管理支

下载

典型误解场景:

  • 以为 await sleep(1000); console.log('done') 会让后续所有 JS 停 1 秒 —— 实际只是这个函数的下一行延后执行,页面依然响应、定时器照走
  • await 串行多个请求时,总耗时是各请求之和;若想缩短,得改用 Promise.all([a(), b(), c()]) 并发发起
  • Node.js 中 await 一个 fs.readFile 不会阻塞事件循环,但用 fs.readFileSync 就会 —— 关键在底层 API 是否异步,不是 await 本身

如何处理 await 失败的情况?

最稳妥的方式是用 try/catch 捕获 await 表达式的 reject:

async function loadUser(id) {
  try {
    const res = await fetch(`/api/user/${id}`)
    if (!res.ok) throw new Error(`HTTP ${res.status}`)
    return await res.json()
  } catch (err) {
    console.error('Failed to load user:', err)
    return null
  }
}

注意:catch 捕获的是 Promise rejection,不是语法错误或同步异常(比如 JSON.parse(undefined) 仍会抛 SyntaxError)。另外,也可以用 .catch() 链式处理,但可读性差、错误堆更难追踪。

另一个实用技巧:封装一个不抛错的 await 辅助函数,比如:

async function safeAwait(promise) {
  try {
    return [null, await promise]
  } catch (err) {
    return [err, null]
  }
}
// 用法:const [err, data] = await safeAwait(fetch('/api'))

实际项目中,并发请求多、错误路径复杂时,这种模式比层层 try/catch 更轻量——但别忘了,它掩盖了原始堆栈,调试时得留心。

真正麻烦的是嵌套异步逻辑里的错误传播边界,比如在 setTimeout 回调里 await,错误就彻底脱离外层 try/catch 了。这种地方,要么避免在非 async 上下文中启动 await,要么用 unhandledrejection 兜底监控。

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

420

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

536

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

313

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

77

2025.09.10

scripterror怎么解决
scripterror怎么解决

scripterror的解决办法有检查语法、文件路径、检查网络连接、浏览器兼容性、使用try-catch语句、使用开发者工具进行调试、更新浏览器和JavaScript库或寻求专业帮助等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

228

2023.10.18

500error怎么解决
500error怎么解决

500error的解决办法有检查服务器日志、检查代码、检查服务器配置、更新软件版本、重新启动服务、调试代码和寻求帮助等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

297

2023.10.25

堆和栈的区别
堆和栈的区别

堆和栈的区别:1、内存分配方式不同;2、大小不同;3、数据访问方式不同;4、数据的生命周期。本专题为大家提供堆和栈的区别的相关的文章、下载、课程内容,供大家免费下载体验。

398

2023.07.18

堆和栈区别
堆和栈区别

堆(Heap)和栈(Stack)是计算机中两种常见的内存分配机制。它们在内存管理的方式、分配方式以及使用场景上有很大的区别。本文将详细介绍堆和栈的特点、区别以及各自的使用场景。php中文网给大家带来了相关的教程以及文章欢迎大家前来学习阅读。

575

2023.08.10

2026赚钱平台入口大全
2026赚钱平台入口大全

2026年最新赚钱平台入口汇总,涵盖任务众包、内容创作、电商运营、技能变现等多类正规渠道,助你轻松开启副业增收之路。阅读专题下面的文章了解更多详细内容。

54

2026.01.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 4.4万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.6万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号