回调地狱+Promise+ES6

JavaScript 异步机制与异步编程终极指南完整梳理回调地狱成因 → 事件循环原理 → Promise/async/await 实战 → axios 封装一、异步编程核心背景为什么异步是必然1. JS 单线程本质异步的根源JS 设计为单线程同一时间只能执行一个任务核心目的是避免多线程操作 DOM 导致的冲突如同时修改同一个节点。但单线程存在致命问题同步执行耗时任务网络请求、文件读写、数据库查询会导致主线程阻塞页面卡死、交互无响应、渲染暂停用户体验极差。2. 异步非阻塞解决方案浏览器 / Node.js 设计异步非阻塞机制发起耗时任务 → 移交至环境层Web API/Node API处理主线程继续执行后续代码不等待任务完成任务完成后通过回调函数通知主线程处理结果。3. 同步 vs 异步 核心对比类型执行特点典型场景同步立即执行、阻塞、直接取值变量运算、普通函数调用、DOM 查询、循环 / 条件判断、数组 / 字符串方法异步非阻塞、回调取值、耗时定时器setTimeout、网络请求fetch/axios、文件 IO、DOM 事件、数据库查询二、回调地狱异步编程的 “噩梦”1. 回调地狱完整成因四大核心1异步结果的获取限制异步任务的结果只能在回调函数内部获取外部尤其是全局变量永远无法拿到letuser;// 同步阶段发起异步不等待getUser();// 同步阶段读取 → 永远 undefined赋值在异步阶段console.log(user);functiongetUser(){setTimeout((){// 异步阶段赋值已错过读取时机user{id:1,name:张三};},1000);}2业务强顺序依赖实际业务中多个异步任务存在数据依赖先获取用户 ID → 再请求该用户的订单再获取订单 ID → 最后请求订单详情。3嵌套不可避免下一个异步任务必须写在上一个的回调内才能拿到依赖数据最终形成多层嵌套console.log(同步开始);// 回调地狱典型代码getUser(1,(user){console.log(拿到用户,user);getOrders(user.id,(orders){console.log(拿到订单,orders);getOrderDetail(orders[0].id,(detail){console.log(拿到详情,detail);});});});console.log(同步结束);// 模拟异步函数functiongetUser(id,cb){setTimeout(()cb({id,name:张三}),1000);}functiongetOrders(userId,cb){setTimeout(()cb([{id:101}]),1000);}functiongetOrderDetail(orderId,cb){setTimeout(()cb({price:99}),1000);}4输出顺序固定同步开始 → 同步结束 → 拿到用户 → 拿到订单 → 拿到详情2. 回调地狱的四大痛点可读性极差金字塔式缩进逻辑层级混乱维护成本高修改任意一层需联动调整所有嵌套层错误处理复杂每层需单独捕获错误无法统一处理流程不可控难以实现取消、中断、重试等逻辑。三、JS 异步底层事件循环Event Loop1. 四大核心组件必懂组件作用执行栈Call Stack同步代码执行区单线程执行完立即弹出栈空表示主线程空闲Web API托管异步任务定时器、网络请求等JS 主线程不等待移交后直接继续任务队列Task Queue异步任务完成后回调函数排队等待执行先进先出事件循环永久循环检查执行栈是否为空 → 栈空则取出队列首个回调 → 推入执行栈2. 完整执行流程以 setTimeout 为例setTimeout(()console.log(异步),0);console.log(同步1);console.log(同步2);阶段 1同步执行主线程优先执行栈推入setTimeout同步函数向 Web API 发送 “计时 0 秒” 指令回调函数暂存至 Web API未入队、未执行setTimeout执行完毕弹出执行栈。执行console.log(同步1)→ 弹出执行栈执行console.log(同步2)→ 弹出执行栈同步代码执行完毕 → 执行栈清空。阶段 2Web API 处理异步任务Web API 完成计时 → 不执行回调仅将回调推入任务队列。阶段 3事件循环调度执行事件循环检测到执行栈空 任务队列有回调取出回调推入执行栈 → 执行console.log(异步)回调执行完毕弹出执行栈。3. 回调地狱的执行流程拆解同步阶段执行console.log(同步开始)→ 执行getUser同步函数移交回调至 Web API→ 执行console.log(同步结束)→ 执行栈空Web API 计时 1000ms →getUser回调入队 → 事件循环推入执行栈执行执行getUser回调打印用户 → 执行getOrders移交回调至 Web API→ 回调执行完毕弹出Web API 计时 1000ms →getOrders回调入队 → 事件循环推入执行栈执行执行getOrders回调打印订单 → 执行getOrderDetail移交回调至 Web API→ 回调执行完毕弹出Web API 计时 1000ms →getOrderDetail回调入队 → 事件循环推入执行栈执行 → 打印详情。四、异步编程解决方案Promise1. Promise 核心定义JS 内置构造函数用于封装异步操作解决回调地狱三种状态pending等待→fulfilled成功/rejected失败状态不可逆成功触发.then()失败触发.catch()无论成败触发.finally()。2. 原生 Promise 基础用法// 封装异步任务functiongetData(){returnnewPromise((resolve,reject){setTimeout((){// 成功传递结果resolve({id:1,name:张三});// 失败传递错误注释掉上方取消注释可测试// reject(请求失败);},1000);});}// 调用 Promiseconsole.log(开始执行);getData().then((res){console.log(获取数据,res);}).catch((err){console.error(错误,err);}).finally((){console.log(无论成败都执行);});3. 关键原理Promise 如何传递值resolve(数据)Promise 会缓存该数据异步完成后自动传给.then()的参数reject(错误)同理错误信息会自动传给.catch()的参数核心.then()/.catch()的回调由 Promise 自动调用参数是缓存的结果 / 错误。4. Promise 链式调用解决回调地狱将嵌套的回调改为链式执行逻辑平铺可读性提升// 封装为 Promise 版本的异步函数functiongetUserPromise(id){returnnewPromise((resolve){setTimeout(()resolve({id,name:张三}),1000);});}functiongetOrdersPromise(userId){returnnewPromise((resolve){setTimeout(()resolve([{id:101,userId}]),1000);});}functiongetOrderDetailPromise(orderId){returnnewPromise((resolve){setTimeout(()resolve({id:orderId,price:99}),1000);});}// 链式调用无嵌套console.log(同步开始);getUserPromise(1).then((user){console.log(拿到用户,user);// 返回下一个 Promise链式衔接returngetOrdersPromise(user.id);}).then((orders){console.log(拿到订单,orders);returngetOrderDetailPromise(orders[0].id);}).then((detail){console.log(拿到详情,detail);}).catch((err){// 统一捕获所有错误console.error(流程错误,err);});console.log(同步结束);五、异步编程终极方案async/await1. 核心本质async/await是 Promise 的语法糖让异步代码以 “同步写法” 执行完全替代.then()链式。2. 关键字作用关键字作用async修饰函数使其返回值自动转为 Promise允许函数内部使用awaitawait仅在 async 函数内使用等待 Promise 完成自动 “拆包” 取出resolve值3. 基础用法同步式异步// 复用上述 Promise 封装的函数asyncfunctionfetchAllData(){try{console.log(同步开始);// 同步写法等待 Promise 完成直接取值constuserawaitgetUserPromise(1);console.log(拿到用户,user);constordersawaitgetOrdersPromise(user.id);console.log(拿到订单,orders);constdetailawaitgetOrderDetailPromise(orders[0].id);console.log(拿到详情,detail);console.log(同步结束);}catch(err){// 统一捕获所有异步错误替代 .catchconsole.error(流程错误,err);}finally{console.log(流程结束无论成败);}}// 调用函数fetchAllData();4. 关键原理答疑1await 为什么能直接拿到数据// 直接打印Promise 对象未拆包console.log(getUserPromise(1));// Promise { pending }// await 自动拆包取出 resolve 的值constuserawaitgetUserPromise(1);console.log(user);// { id: 1, name: 张三 }2try/catch 如何替代 .catchawait等待的 Promise 若reject会自动抛出错误try块捕获成功结果catch块捕获所有reject错误等价于 Promise 链式的.then().catch()但写法更直观。5. 批量异步处理拓展1Promise.all并行执行全部成功才返回asyncfunctionfetchBatchData(){try{// 并行发起多个异步请求效率更高const[user,orders]awaitPromise.all([getUserPromise(1),getOrdersPromise(1)]);console.log(批量结果,user,orders);}catch(err){console.error(任意一个请求失败,err);}}2Promise.race竞速执行第一个完成就返回// 超时控制场景asyncfunctionfetchWithTimeout(){try{constresultawaitPromise.race([getData(),// 3秒超时newPromise((_,reject)setTimeout(()reject(请求超时),3000))]);console.log(结果,result);}catch(err){console.error(err);}}六、实战axios 异步请求封装与使用1. 核心概念梳理技术定位AJAX异步请求技术统称包含 XHR、fetchfetch浏览器原生 Promise 式请求 API轻量需手动处理状态 / 错误axios基于 XHR Promise 封装的请求库功能完善项目首选async/await配合 axios 使用简化 Promise 链式写法2. axios 基础用法1直接使用简单场景importaxiosfromaxios;// GET 请求axios.get(/api/user/1).then((res)console.log(数据,res.data)).catch((err)console.error(错误,err));// POST 请求axios.post(/api/order,{userId:1,goodsId:101}).then((res)console.log(创建成功,res.data));2创建实例项目推荐隔离不同后端的配置避免全局污染// 创建 axios 实例constrequestaxios.create({baseURL:/api,// 基础路径timeout:5000,// 超时时间headers:{Content-Type:application/json}// 通用请求头});// 实例使用asyncfunctiongetUserInfo(){try{constresawaitrequest.get(/user/1);console.log(用户信息,res.data);}catch(err){console.error(请求失败,err);}}3. axios 高级封装解决重复写 .data 问题通过响应拦截器自动提取核心数据简化使用// 封装 axios 实例constrequestaxios.create({baseURL:/api,timeout:5000});// 请求拦截器添加 token 等通用配置request.interceptors.request.use((config){// 示例添加登录 tokenconsttokenlocalStorage.getItem(token);if(token){config.headers.AuthorizationBearer${token};}returnconfig;},(err)Promise.reject(err));// 响应拦截器自动拆包 data统一处理错误request.interceptors.response.use((res){// 只返回后端核心数据省略包装层returnres.data;},(err){// 统一错误处理如 401 跳转登录if(err.response?.status401){window.location.href/login;}returnPromise.reject(err.message||请求失败);});// 封装后使用无需 .dataasyncfunctionfetchOrder(){try{// 直接拿到后端数据无包装层constdataawaitrequest.get(/order/101);console.log(订单详情,data);}catch(err){console.error(错误,err);}}七、常见问题与注意事项1. 同步 / 异步易混淆点setTimeout(fn, 0)不是立即执行需等同步代码执行完事件循环调度forEach中使用 await 无效forEach 是同步遍历不会等待异步完成改用 for 循环async 函数返回值无论返回什么都会被包装为 Promise。2. 路径引入规则环境后缀规则示例工程化Vue/React可省略 .js/.vue/.jsx 后缀import request from ./request浏览器原生module必须加完整后缀import request from ./request.js3. 错误处理最佳实践全局错误捕获axios 拦截器统一处理 401/403/500 等状态码业务错误捕获async/await 结合 try/catch 处理具体业务异常避免空 catch至少打印错误信息便于排查问题。八、全流程总结异步根源JS 单线程 耗时任务 → 异步非阻塞机制回调地狱异步结果只能在回调内获取 业务强依赖 → 多层嵌套事件循环异步调度核心保证单线程下异步任务有序执行Promise封装异步操作链式调用解决回调地狱async/awaitPromise 语法糖同步写法实现异步逻辑axios基于 Promise 的请求库封装拦截器提升开发效率。异步编程的核心是理清执行顺序和结果传递方式从回调地狱到 Promise 再到 async/await本质是语法的优化底层始终依赖事件循环的异步调度逻辑。掌握以上内容可从容应对前端所有异步编程场景。