JavaScript基础课程十八、异步编程高级（async/await + 模块化）

本课聚焦前端异步编程终极方案async/await与ES6模块化是异步编程的收尾与进阶内容。async/await依托Promise用同步写法实现异步逻辑彻底解决回调嵌套和链式调用繁琐问题是当前项目主流异步写法。模块化则解决代码混乱、全局污染、复用性差的痛点实现代码规范化拆分。课程通过基础异步、并行执行、模块化拆分三类案例串联起完整的高级异步开发流程帮助建立工程化思维。掌握本课内容既能写出简洁健壮的异步代码又能搭建规范的项目结构适配主流前端开发规范也是面试高频考点为后续框架学习打下坚实底层基础。一、课程学习目的理解async/await的底层依托掌握其作为Promise语法糖的核心特性彻底告别回调嵌套。熟练使用async/await编写同步风格的异步代码实现异步任务的串行、并行执行。掌握try/catch捕获async/await异常的规范写法保障异步逻辑稳定性。理解JS模块化的意义学会ES6模块化export/import的基础用法实现代码拆分与复用。结合async/await与模块化搭建规范的异步项目结构为工程化开发奠定基础。二、核心知识点讲解1. async/await 基础认知async/await是ES7推出的Promise语法糖基于Promise实现让异步代码写法完全同步化可读性和可维护性远超原生Promise链式调用。核心规则async修饰函数标记该函数为异步函数内部可使用await函数默认返回Promise对象。await只能在async函数内使用暂停代码执行等待右侧Promise状态变更后再继续。2. async/await 执行与异常处理await会等待Promise返回结果成功则直接获取resolve值失败则抛出异常必须配合try/catch捕获错误避免程序崩溃。3. ES6 模块化基础模块化用于拆分代码、避免全局污染、实现功能复用是前端工程化的基础。核心语法export导出模块内的变量、函数、类分为默认导出export default和按需导出。import导入其他模块的内容配合script typemodule使用。4. async/await 结合模块化将异步请求、工具函数封装为独立模块通过import引入在async函数内调用await执行实现逻辑解耦、代码复用。三、示例程序示例1async/await 基础用法// 复用第15课Promise封装functiongetWordInfo(word){returnnewPromise((resolve,reject){setTimeout((){if(word)resolve({en:word,cn:中文释义});elsereject(单词不能为空);},1000);});}// async修饰异步函数asyncfunctionfetchWord(){// try/catch捕获异常try{// await等待Promise结果同步写法constres1awaitgetWordInfo(apple);console.log(第一个单词,res1);constres2awaitgetWordInfo(banana);console.log(第二个单词,res2);}catch(err){// 捕获await抛出的错误console.error(异步失败,err);}}// 调用异步函数fetchWord();示例2async/await 并行执行asyncfunctionfetchAllWord(){try{// Promise.all实现并行await等待全部结果constresultsawaitPromise.all([getWordInfo(apple),getWordInfo(banana),getWordInfo(orange)]);console.log(全部单词,results);}catch(err){console.error(加载失败,err);}}fetchAllWord();示例3ES6模块化拆分// wordModule.js 模块文件导出// 异步函数封装exportasyncfunctiongetWord(word){try{constresawaitfetch(/api/word?name${word});returnres.json();}catch(err){throwerr;}}// 默认导出exportdefault{getWord};// 主文件 index.js 导入import{getWord}from./wordModule.js;asyncfunctioninit(){constdataawaitgetWord(grape);console.log(data);}init();四、掌握技巧与方法await必须写在async函数内禁止在全局或普通函数中单独使用。所有await逻辑都要包裹try/catch规范捕获异步异常避免未处理错误。无依赖的异步任务用Promise.allawait并行执行提升加载效率。模块化拆分遵循单一职责异步逻辑、工具函数、业务逻辑分开封装。浏览器中使用ES6模块化script标签需添加typemodule属性。async函数返回的Promise可继续链式调用灵活适配复杂场景。五、课后作业基础作业用async/await改写第15课Promise链式调用代码实现串行获取单词。使用try/catch捕获async/await的异常测试失败场景。编写async函数通过awaitPromise.all并行加载3组数据。进阶作业将Promise异步函数拆分为独立模块用import导入并通过await调用。实现异步加载的加载状态、成功、失败三种页面反馈。在async函数内实现异步任务超时中断逻辑。实战作业搭建模块化异步单词查询页面拆分异步请求模块、渲染模块用async/await处理异步逻辑实现加载提示、错误兜底、数据展示全流程。上一课异步编程进阶Promise实战作业代码代码功能说明本实战代码围绕Promise核心知识点采用英语单词加载场景实现完整的异步处理流程。代码封装Promise异步函数模拟网络请求延迟获取单词数据支持单个单词查询、链式串行加载、多单词并行加载三大功能搭配页面加载状态、成功渲染、错误提示交互直观展示Promise三种状态流转、then/catch/finally用法以及Promise.all并行执行逻辑。页面配备功能按钮点击可分步演示各类异步场景全程贴合第15课核心考点对比回调函数优势为async/await学习做好铺垫。注意事项Promise状态一旦从pending变为fulfilled/rejected不可再次修改resolve/reject仅调用一次。必须添加catch捕获异常避免未处理的Promise错误导致页面逻辑中断。链式调用时then内部需返回新Promise才能实现异步串行执行。Promise.all中任一任务失败整体会进入catch需做好单个任务异常兜底。finally常用于关闭加载状态、清理定时器无论成功失败都会执行。调试时打开浏览器控制台观察Promise状态变化与执行时序加深理解。禁止在Promise执行器内编写同步阻塞代码保证异步特性。完整实战代码!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8title第15课 Promise实战 - 单词异步加载器/titlestyle.box{width:750px;margin:50px auto;padding:30px;border:1px solid #eee;border-radius:10px;font-family:Microsoft YaHei;box-shadow:0 0 12pxrgba(0,0,0,0.06);}.btn{padding:10px 20px;margin:10px 8px;background:#42b983;color:#fff;border:none;border-radius:6px;cursor:pointer;transition:0.3s;}.btn:hover{background:#359469;}.result{margin-top:25px;padding:20px;line-height:2;border-top:1px dashed #eee;min-height:180px;}.item{margin:8px 0;padding:10px;background:#f9f9f9;border-radius:5px;}.loading{color:#666;}.error{color:#f56c6c;}/style/headbodydivclassboxh2Promise单词异步加载器/h2buttonclassbtnonclickgetSingleWord()单个单词查询/buttonbuttonclassbtnonclickgetSeriesWord()串行链式加载/buttonbuttonclassbtnonclickgetAllWord()并行批量加载/buttonbuttonclassbtnonclickclearResult()清空结果/buttondivclassresultidresult/div/divscriptconstresDomdocument.getElementById(result);// 渲染函数functionrender(html,className){resDom.innerHTMLdiv classitem${className}${html}/div;}// 清空结果functionclearResult(){resDom.innerHTML;}// Promise封装异步获取单词functionfetchWord(word){returnnewPromise((resolve,reject){render(正在加载${word},loading);// 模拟网络延迟setTimeout((){if(wordtypeofwordstring){// 成功resolve({en:word,cn:对应中文释义,status:success});}else{// 失败reject(单词参数无效加载失败);}},1500);});}// 1. 单个单词查询functiongetSingleWord(){fetchWord(apple).then(res{render(成功${res.en}-${res.cn});}).catch(err{render(错误${err},error);}).finally((){render(单次查询任务结束);});}// 2. 链式串行加载functiongetSeriesWord(){fetchWord(apple).then(res{render(成功1${res.en}-${res.cn});returnfetchWord(banana);}).then(res{render(成功2${res.en}-${res.cn});returnfetchWord(orange);}).then(res{render(成功3${res.en}-${res.cn});}).catch(err{render(错误${err},error);});}// 3. 并行批量加载functiongetAllWord(){consttaskList[fetchWord(apple),fetchWord(banana),fetchWord(grape)];Promise.all(taskList).then(results{results.forEach((res,index){render(批量成功${index1}${res.en}-${res.cn});});}).catch(err{render(批量错误${err},error);});}/script/body/html作业验收标准所有功能按钮点击正常无控制台报错加载、成功、错误状态展示清晰。单个查询、串行链式、并行批量逻辑执行准确符合Promise执行规则。异常捕获到位错误提示友好finally收尾逻辑正常执行。代码规范、注释完整贴合第15课Promise核心知识点交互简洁直观。