串行请求太慢？1个Promise.all并发技巧，前端接口效率直接翻倍

前端必踩痛点串行await拖慢页面加载写前端接口联调时很多新手会这么写多个无依赖接口挨个await等待第一个请求结束才发第二个。页面白屏时间直接翻倍用户加载体验极差。比如同时拉取语录必应壁纸两个接口串行写法要等两次请求总时长并发只需最慢接口的耗时。读完这篇你能学到Promise三种状态流转与不可逆特性Promise.all核心执行逻辑、失败兜底规则完整可运行前端并发请求实战代码Promise.all高频踩坑点与优化方案串行/并发接口适用场景区分一、先搞懂Promise基础状态看懂并发底层逻辑1. Promise三种固定状态创建实例new Promise()初始状态为pending待处理最终只会两种终态状态一旦确定永久无法变更fulfilled成功执行.then()拿到返回结果rejected失败执行.catch()捕获报错信息2. Promise.all核心失败机制接收Promise数组作为参数执行规则所有请求全部成功才会把结果按数组原始顺序返回只要任意一个Promise失败整体直接失败立刻进入catch不会等待其余未完成请求二、实战场景无依赖接口并发请求需求页面初始化同时拉取两条独立接口一言语录接口https://v1.hitokoto.cn/?ciencodejson必应每日壁纸接口https://api.1314.cool/bingimg/?typejsonrand1两个接口无数据依赖完全不需要串行等待用Promise.all实现并发。完整可运行HTML代码!DOCTYPEhtmlhtmllangenheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0titlePromise.all并发请求实战/title/headbodyscript// 封装两个独立接口请求函数constgetStoryasync()fetch(https://v1.hitokoto.cn/?ciencodejson)constgetRatpasync()fetch(https://api.1314.cool/bingimg/?typejsonrand1)asyncfunctionmain(){// 串行写法低效不推荐// const storyRes await getStory();// const imgRes await getRatp();// Promise.all 并发执行Promise.all([getStory(),getRatp()]).then(responseList{// responseList 顺序和传入Promise数组完全对应// 批量解析所有接口返回的json数据returnPromise.all(responseList.map(resres.json()))}).then(data{console.log(语录数据,data[0])console.log(壁纸数据,data[1])}).catch(err{// 任意接口报错直接进入这里console.log(请求失败,err)})}// 执行并发请求main();/script/body/html代码核心逻辑拆解把所有fetch Promise放进数组传入Promise.all同时发起网络请求接口返回的response数组顺序永远和传入数组保持一致不会因为接口响应快慢打乱顺序全部接口请求完成后统一调用.map批量解析json()任意接口异常直接触发catch终止流程三、Promise.all三大高频踩坑提醒坑1单一接口报错全部数据直接丢失问题多个接口并发其中一个404/500catch直接捕获成功的接口数据也拿不到。解决每个Promise内部单独捕获异常保证不中断整体流程constwrapFetch(fn)fn().catch(err({error:true,msg:err}))Promise.all([wrapFetch(getStory),wrapFetch(getRatp)])坑2混淆串行与并发白白浪费加载时间错误写法串行耗时叠加// 总耗时 接口1耗时 接口2耗时constaawaitgetStory()constbawaitgetRatp()正确写法并发耗时取最大值// 总耗时 最慢接口耗时const[a,b]awaitPromise.all([getStory(),getRatp()])坑3忘记response.json()异步解析直接打印response对象fetch返回的是Response包装对象不是业务数据必须通过.json()二次解析且该方法同样返回Promise需要二次Promise.all批量处理。四、什么时候用并发什么时候只能串行✅ 优先使用Promise.all并发接口之间无数据依赖互不影响页面初始化批量拉取字典、列表、配置类数据批量上传、批量查询接口❌ 必须串行await第二个接口需要第一个接口返回的id/token作为参数接口调用有严格先后业务流程登录→获取用户信息五、总结Promise存在pending/fulfilled/rejected三种状态状态切换不可逆Promise.all实现无依赖接口并发大幅缩短页面加载时长失败策略任一Promise报错整体直接失败需单独兜底处理异常返回结果顺序固定和传入Promise数组顺序一一对应不受接口响应速度影响。简单一句话无依赖接口全用Promise.all并发有数据依赖再用await串行。