JavaScript异步编程 Async/Await 使用详解：从原理到最佳实践
🌷 古之立大事者，不惟有超世之才，亦必有坚忍不拔之志
🎐 个人CSND主页——Micro麦可乐的博客
🐥《Docker实操教程》专栏以最新的Centos版本为基础进行Docker实操教程，入门到实战
🌺《RabbitMQ》专栏19年编写主要介绍使用JAVA开发RabbitMQ的系列教程，从基础知识到项目实战
🌸《设计模式》专栏以实际的生活场景为案例进行讲解，让大家对设计模式有一个更清晰的理解
🌛《开源项目》本专栏主要介绍目前热门的开源项目，带大家快速了解并轻松上手使用
✨《开发技巧》本专栏包含了各种系统的设计原理以及注意事项，并分享一些日常开发的功能小技巧
💕《Jenkins实战》专栏主要介绍Jenkins+Docker的实战教程，让你快速掌握项目CI/CD，是2024年最新的实战教程
🌞《Spring Boot》专栏主要介绍我们日常工作项目中经常应用到的功能以及技巧，代码样例完整
🌞《Spring Security》专栏中我们将逐步深入Spring Security的各个技术细节，带你从入门到精通，全面掌握这一安全技术
如果文章能够给大家带来一定的帮助！欢迎关注、评论互动～
JavaScript异步编程 Async/Await 使用详解：从原理到最佳实践
1.背景与概念
在传统 JavaScript 开发中，开发者长期面临回调地狱的困扰。随着 ES6 Promise 的出现，异步代码的可读性得到改善，但链式调用依然存在嵌套问题。2017 年 ES8 正式引入的 Async/Await 语法，让异步代码第一次拥有了同步代码般的可读性。
async 函数是基于 Promise 的语法糖，用于简化异步操作的书写方式。使用 async 声明的函数会隐式返回一个 Promise，函数体内部可以通过 await 暂停执行，直到对应的 Promise 完成或抛出错误后再继续执行。await 操作符只能在 async 函数或模块顶层中使用，用于等待一个 Promise 解决，并将其结果作为表达式的值返回；如果 Promise 被拒绝，则会在该位置抛出异常，可配合常规的 try...catch 进行捕获处理。
这种写法极大地提升了异步代码的可读性，使得我们可以像编写同步代码一样直观地处理异步逻辑，同时保留了后台并发执行的优势。
2. 语法详解
2.1 声明与返回值
asyncfunctionfoo(){return42;}上例中， foo() 会返回一个已解决（fulfilled）的 Promise，其值为 42；等价于：
functionfoo(){return Promise.resolve(42);}这是因为任何 async 函数内的返回值都会被自动封装为 Promise
2.2 使用 await 暂停执行
asyncfunctionfetchData(){let response =awaitfetch('/api/data');let data =await response.json();return data;}代码解释：
第一行的await fetch(...)会暂停fetchData的执行，直到fetch返回的Promise完成，并将其结果赋值给 response第二行的await response.json()同理，等待解析JSON后再继续执行如果任一Promise拒绝，则会在该await位置抛出异常，可在外层使用try...catch捕捉。
2.3 错误处理
asyncfunctionsafeFetch(){try{let res =awaitfetch('/bad/url');let json =await res.json();return json;}catch(err){ console.error('请求失败：', err);throw err;// 可再次抛出或返回默认值}}上述模式与同步代码中使用 try…catch 完全一致，大大简化了基于 Promise 链式 .catch() 的写法
2.4 语法规则
下面我们看看我们常用的一些使用语法
// 声明异步函数asyncfunctionfetchUser(){return{ name:'Alice', age:28};// 自动包装为Promise}// 使用箭头函数constfetchData=async()=>{const res =awaitfetch('/api/data');return res.json();};// 立即调用模式(async()=>{const data =awaitfetchData(); console.log(data);})();3. 并发与性能
3.1 顺序等待 vs 并行等待
默认情况下，连续的 await 会串行执行：
let a =awaittask1();let b =awaittask2();若两者互不依赖，可改为并行：
let[a, b]=await Promise.all([task1(),task2()]);3.2 并行执行优化
通过上面 顺序等待 vs 并行等待 的介绍，通常我们可以按照以下形式来进行优化（模拟请求）
// 顺序执行（总耗时 = 各请求耗时之和）asyncfunctionserialRequests(){const res1 =awaitfetch('/api/1');const res2 =awaitfetch('/api/2');return[await res1.json(),await res2.json()];}// 并行执行（总耗时 ≈ 最慢请求耗时）asyncfunctionparallelRequests(){const[res1, res2]=await Promise.all([fetch('/api/1'),fetch('/api/2')]);returnawait Promise.all([res1.json(), res2.json()]);}3.2 限制并发数量
在需要对大量异步任务进行限流时，可使用第三方库（如 p-limit）或自己实现简单队列，避免一次性发起过多请求导致资源竞争或网络拥堵
4. 异步迭代
ES2018 引入了 for await...of，用于遍历异步可迭代对象（如异步生成器）：
asyncfunction*gen(){yieldawaitfetchChunk(1);yieldawaitfetchChunk(2);}(async()=>{forawait(let chunk ofgen()){ console.log(chunk);}})();该语法在处理流式数据（例如文件分块下载）时非常有用
5 常见问题解决方案
5.1 请求重试机制
在外面日常开发中，会遇到请求失败需要重试的需求，来看看以下模拟代码
asyncfunctionfetchWithRetry(url, retries =3){for(let i =0; i < retries; i++){try{const res =awaitfetch(url);returnawait res.json();}catch(err){if(i === retries -1)throw err;awaitnewPromise(r=>setTimeout(r,1000*(i +1)));}}}5.2 竞态条件处理
当多个请求并发执行时，可能因网络延迟、服务器响应速度差异等问题导致响应顺序与发送顺序不一致问题。
更详细讲解可以查阅博主写过一篇【 前端请求乱序问题分析与AbortController、async/await、Promise.all等解决方案】
以下仅展现实现代码：
let lastController =null;asyncfunctionsearch(query){// 取消前一个未完成的请求if(lastController) lastController.abort();const controller =newAbortController(); lastController = controller;try{const res =awaitfetch(`/api/search?q=${query}`,{ signal: controller.signal });returnawait res.json();}catch(err){if(err.name !=='AbortError')throw err;}}5.3 异步生成器
在 ·async function*· 中，你既可以使用 ·await·，也可以使用 ·yield·，将异步任务与懒加载结合：
asyncfunction*asyncGenerator(){for(let i =0; i <3; i++){awaitdelay(1000);yield i;}}这种方式适合按需获取异步数据，提高资源利用率
5.4 处理非 Promise 值
await 后可以跟任意表达式，如果其值不是 Promise，则会被包装为立即解决的 Promise。例如：
let x =await123;// 相当于 await Promise.resolve(123)但建议对非异步操作避免使用 await，以免误导
5.5 常见陷阱
- 遗忘 await：调用
async函数但未加await，会得到未决（pending）的 Promise 而非预期结果 - 在非 async 环境使用 await：仅在模块顶层或
async函数内部可用，否则会抛语法错误 - Promise.all 中单个失败导致整体失败：若需要容忍部分失败，可对内部
Promise使用.catch()处理，避免整体拒绝 - 滥用并发：同时发起过多网络请求可能触发限流或阻塞，建议根据场景调整并发策略
6. 性能优化实践
博主这里例举两个优化的案例：内存管理以及优先加载优化
6.1 内存管理
常见一些大量数据的获取下载
asyncfunctionprocessLargeData(){const data =awaitgetHugeData();// 大数据量// 分块处理for(let i =0; i < data.length; i +=1000){const chunk = data.slice(i, i +1000);awaitprocessChunk(chunk); data[i]=null;// 及时释放内存}}6.2 优先加载优化
asyncfunctionloadCriticalResources(){// 预加载非关键资源const nonCritical =fetch('/non-critical').then(r=> r.json());// 优先处理关键资源const user =awaitfetchUser();const config =awaitfetchConfig();// 等待非关键资源const data =await nonCritical;return{ user, config, data };}7. 结语
Async/Await 的引入彻底改变了 JavaScript 异步编程的面貌。通过本文的讲解，相信小伙伴们可以掌握 Async/Await 的使用精髓，将使您的 JavaScript 代码在保持高性能的同时，获得质的可读性和可维护性提升。
如果你在实践过程中有任何疑问或更好的扩展思路，欢迎在评论区留言，最后希望大家一键三连给博主一点点鼓励！
前端技术专栏回顾：
01【前端技术】 ES6 介绍及常用语法说明
02【前端技术】标签页通讯localStorage、BroadcastChannel、SharedWorker的技术详解
03 前端请求乱序问题分析与AbortController、async/await、Promise.all等解决方案
04 前端开发中深拷贝的循环引用问题：从问题复现到完美解决
05 前端AJAX请求上传下载进度监控指南详解与完整代码示例
06 TypeScript 进阶指南 - 使用泛型与keyof约束参数
07 前端实现视频文件动画帧图片提取全攻略 - 附完整代码样例
08 前端函数防抖（Debounce）完整讲解 - 从原理、应用到完整实现
