讲师中心 微信公众号
AI工具推荐 视频效率加速

async和await怎样简化javascript异步【教程】

千明小哥_3280

千明小哥_3280

发布时间:2026-01-27 16:04:02

|

516人浏览过

|

来源于php中文网

原创

async/await 是 Promise 链的可读性补丁,不改变异步本质;async 函数必返回 Promise,await 仅限 async 内部使用,错误需显式 await + try/catch,多请求应依业务选串行或 Promise.all 并发。

async和await怎样简化javascript异步【教程】

async/await 不是语法糖的替代品,而是 Promise 链的可读性补丁——它不能消除异步本质,但能让你少写 .then() 和 .catch(),也避免掉进 Promise 嵌套或忘记 return 的坑。

async 函数必须显式返回 Promise 才能被 await 消费

很多人以为只要加了 async,函数就“自动变异步”,其实不然:async 只保证函数返回一个 Promise(哪怕你 return 42,也会被包装成 Promise.resolve(42))。但如果你在函数里调用的是普通同步函数、或者忘了 await 一个 Promise,那后续逻辑仍会同步执行。

  • async function foo() { return fetch('/api'); } → 返回的是 Promise<response></response>,没问题
  • async function bar() { fetch('/api'); return 'done'; } → fetch 被丢弃,'done' 立即被包装成 resolved Promise,API 请求实际没等
  • 正确写法是:async function bar() { const res = await fetch('/api'); return res.json(); }

await 只能在 async 函数内部使用

这是常见报错源头:Uncaught SyntaxError: await is only valid in async function。你不能在顶层模块代码、普通函数、事件回调(如 button.onclick = () => { await fn(); })里直接写 await,除非那个函数本身被声明为 async。

  • 浏览器中顶层 await 仅在 ES 模块(type="module")下可用,且只限于模块作用域,不适用于普通 <script></script>
  • setTimeout(() => { await doAsync(); }, 100); ❌ 报错;得写成 setTimeout(async () => { await doAsync(); }, 100); ✅
  • React 事件处理函数常用写法:const handleClick = async () => { await submitForm(); }

错误处理别只靠 try/catch,小心未捕获的 Promise rejection

await 会让 rejected Promise 变成同步抛出的异常,所以 try/catch 能捕获。但这只覆盖你显式 await 的那一层。如果某个 Promise 在 async 函数里被创建却没被 await,又没加 .catch(),它就会变成 unhandled rejection。

chartjs-reporter
chartjs-reporter

此技能用于在用户需要将结构化数据(查询结果、CSV 摘要、JSON 记录或 Python 字典/列表)转换为独立的 HTML 页面时使用。

下载

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

  • async function bad() { fetch('/fail').catch(err => console.error(err)); } → 安全,错误被吞掉
  • async function worse() { fetch('/fail'); } → 即使函数是 async,这个 Promise 仍可能触发 unhandledrejection 事件
  • 推荐模式:try { const data = await fetch(...).then(r => r.json()); } catch (e) { /* 处理网络或解析错误 */ }

await 并不“阻塞线程”,但会暂停当前 async 函数的执行流

这是最容易误解的一点:JS 仍是单线程、非阻塞的。await 只是让 JS 引擎把当前函数挂起,把控制权交还给事件循环,等 Promise settled 后再从暂停处继续。这意味着:

  • 多个 await 默认是串行的,不是并行的 —— await a(); await b(); 意味着 b() 必须等 a() 完全结束
  • 想并发?得用 Promise.all([a(), b()]),再 await Promise.all([...])
  • 过度使用 await 在无关操作间会造成不必要延迟,比如本可以并行的 API 请求被写成串行

真正难的从来不是写 async/await,而是判断哪几个异步操作该串行、哪几个该并发、以及 Promise 生命周期里哪一环该负责错误清理。这些没法靠语法自动解决,得看业务逻辑本身是否允许重叠或降级。

相关文章

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

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

下载

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

热门AI工具

更多
豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

VibeKnow
VibeKnow Hot

一款AI视频创作工具,主要用于全球首个AI知识视频创作平台,文档、文章、网页,一键生成视频,适合需要提升相关任务效率的用户。

Laper
Laper Hot

Laper是专为编剧、导演和制片人推出的 AI 原生剧本创作工具。

讯飞绘文

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

SkildArt
SkildArt Hot

SkildArt是一款AI文本写作工具,一站式 AI 视觉创作平台。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

相关专题

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

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

2155

2023.08.07

json是什么
json是什么

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

3342

2023.08.23

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

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

1116

2023.10.13

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

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

3839

2025.09.10

scripterror怎么解决
scripterror怎么解决

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

989

2023.10.18

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

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

3020

2023.10.25

c语言const用法
c语言const用法

const是关键字,可以用于声明常量、函数参数中的const修饰符、const修饰函数返回值、const修饰指针。详细介绍:1、声明常量,const关键字可用于声明常量,常量的值在程序运行期间不可修改,常量可以是基本数据类型,如整数、浮点数、字符等,也可是自定义的数据类型;2、函数参数中的const修饰符,const关键字可用于函数的参数中,表示该参数在函数内部不可修改等等。

2258

2023.09.20

线程和进程的区别
线程和进程的区别

线程和进程的区别:线程是进程的一部分,用于实现并发和并行操作,而线程共享进程的资源,通信更方便快捷,切换开销较小。本专题为大家提供线程和进程区别相关的各种文章、以及下载和课程。

4298

2023.08.10

Gradle插件开发入门教程
Gradle插件开发入门教程

本专题介绍Gradle插件开发的基本流程,涵盖插件类编写、自定义任务注册、扩展参数设计和插件应用方法,帮助你理解插件如何组织构建逻辑,减少多个项目之间的重复配置。

0

2026.10.22

热门下载

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

精品课程

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

共58课时 | 12.3万人学习

国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 1.4万人学习

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

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn