1. 为什么Promise串联值得单独拿出来讲刚接触ES6那会儿我对Promise的理解长期停留在“比回调好看一点”的层面。直到有一次做一个图片批量上传的功能每个文件要先请求上传凭证、再上传到存储、最后回写业务服务器三步之间有严格的前后依赖我才真正意识到Promise真正的威力不在单个Promise怎么写而在多个Promise怎么串起来。这篇文章就围绕“Promise的串联”这个主题把我在实际项目里踩过的坑、总结的套路完整地梳理一遍。不管你是刚学ES6的新手还是已经用过Promise但总觉得用得不够顺的老手应该都能从里面找到点有用的东西。核心会讲清楚几件事串联的本质是什么、then返回的到底是什么、值怎么在链条里传递、错误怎么被捕获、以及几种常见的串联写法各自适合什么场景。先给个结论性的判断Promise串联的本质是把异步操作像流水线一样排好队前一道工序的产出作为后一道工序的输入任何一道工序出问题都能被统一拦截。理解了这句话后面所有的细节都是它的展开。2. 先搞清楚串联的底层机制2.1 then方法返回的到底是什么很多人用Promise串联时是“照着例子抄”的a.then().then().then()一路写下去但问他每个then返回的是什么答不上来。这个点必须掰开讲。then方法永远返回一个全新的Promise对象注意是全新的不是原来那个。这一点非常关键它决定了串联能成立。你可以这样理解每次调用then就相当于在流水线末端又接了一段新的传送带原来那段传送带的状态不会因为新接了一段而改变。const p1 Promise.resolve(1); const p2 p1.then(v v 1); console.log(p1 p2); // false既然返回的是新Promise那这个新Promise的状态由谁决定答案是由then里回调函数的执行结果决定。这里分几种情况我整理成一张表方便对照then回调的返回值新Promise的状态后续then拿到的值普通值数字、字符串、对象fulfilled这个普通值本身另一个Promise跟随该Promise的状态该Promise resolve的值抛出错误throwrejected错误对象返回rejected的Promiserejected错误对象没有return返回undefinedfulfilledundefined这张表是Promise串联的“字典”建议背下来。尤其是“返回另一个Promise”这一条它是串联能处理异步嵌套的根本原因。2.2 值是怎么在链条里往下传的值的传递遵循一个简单规则上一个then回调的返回值就是下一个then回调的参数。如果中间某个then没有返回值那下一个then拿到的就是undefined这是新手最容易翻车的地方。Promise.resolve(1) .then(v { v 1; }) // 注意这里没有return .then(v console.log(v)); // 输出 undefined不是2上面这段代码很多人第一次写都会犯。花括号里写了v 1但没return等于白算。要么写成箭头函数的简写形式v v 1隐式返回要么老老实实加return。我个人的习惯是只要then回调里超过一行逻辑就一定显式写return避免这种低级错误。2.3 串联和回调地狱的本质区别有人会问Promise串联写出来不也是一长串吗跟回调地狱有啥区别区别在于控制流的方向。回调地狱是嵌套的代码结构是往右缩进的“金字塔”错误处理要在每一层单独写逻辑一复杂就没法看。Promise串联是线性的代码结构是往下延伸的“链条”错误处理可以统一放在末尾一个catch里。前者是“层层包裹”后者是“依次排队”这是本质差异。3. 几种常见的串联写法与选型3.1 线性then链最基础也最常用线性then链就是p.then().then().then()这种写法适合步骤之间有严格先后依赖的场景。比如前面提到的上传流程getUploadToken(file) .then(token uploadToStorage(file, token)) .then(url saveToServer(url)) .then(result { console.log(全部完成, result); }) .catch(err { console.error(流程中断, err); });这种写法的好处是一目了然每一步做什么清清楚楚。缺点是如果步骤特别多比如十几个链条会很长读起来累。我的经验是超过七八步就该考虑拆分把相关的几步封装成一个函数让主链条保持清爽。3.2 在then里返回新Promise处理异步嵌套这是串联里最核心的技巧。当某一步本身又是异步操作时直接在then回调里返回那个异步Promise链条会自动等待它完成再往下走。step1() .then(res1 { // 这里返回一个新的Promise链条会等它 return step2(res1); }) .then(res2 { return step3(res2); });这里有个坑要提醒如果你在then里调用了异步函数但没有return链条不会等待它。比如step1().then(res { step2(res); // 忘了return }).then(() { // 这里会在step2完成之前就执行 });这种bug特别隐蔽因为代码不报错只是执行顺序不对。排查的时候如果发现“后面的步骤拿不到前面异步的结果”第一反应就该去检查是不是漏了return。3.3 Promise.all并行任务的串联有时候几个异步操作之间没有依赖可以同时发起等全部完成后再统一处理。这时候用Promise.all比一个个串起来效率高得多。Promise.all([fetchA(), fetchB(), fetchC()]) .then(([resA, resB, resC]) { // 三个都完成了 }) .catch(err { // 任何一个失败就进这里 });Promise.all的特点是一荣俱荣一损俱损全部成功才成功任何一个失败就立即reject。它返回的结果数组顺序和传入的数组顺序一致跟哪个先完成无关这点可以放心。3.4 Promise.allSettled需要知道每个结果时用Promise.all有个局限只要有一个失败你就拿不到其他成功的结果了。如果业务上需要“不管成功失败每个结果我都要知道”那就用Promise.allSettled。Promise.allSettled([fetchA(), fetchB(), fetchC()]) .then(results { results.forEach(r { if (r.status fulfilled) { console.log(成功, r.value); } else { console.log(失败, r.reason); } }); });这个API在批量操作场景特别有用比如批量删除、批量提交你需要给用户一个“哪些成功哪些失败”的完整报告。3.5 串联写法选型对照场景推荐写法理由步骤有严格先后依赖线性then链逻辑清晰错误统一捕获某步本身是异步then里return新Promise链条自动等待多个独立任务并行Promise.all总耗时取决于最慢的那个需要每个任务的结果Promise.allSettled不因单个失败丢失全部结果需要竞速取最快Promise.race谁先完成用谁4. 错误处理串联里最容易出错的部分4.1 catch的位置决定了它能捕获什么catch本质上是then(null, onRejected)的语法糖。它捕获的是它之前所有环节抛出的错误包括同步throw和rejected的Promise。step1() .then(step2) .then(step3) .catch(err { // 能捕获step1、step2、step3任何一步的错误 });关键点catch只捕获它前面的错误捕获不了它后面的。所以catch一般放在链条末尾。如果你在catch后面还接了then那个then会正常执行因为catch把错误“消化”了返回了一个fulfilled的Promise。4.2 错误被吞掉的几种情况实际项目里最常见的bug就是“错误莫名其妙消失了”。我总结了几种典型情况第一种catch里又抛错但没接后续catch。catch回调里如果throw了新错误这个错误会传给下一个catch如果没有下一个catch就变成未处理的rejection。第二种在then里写了try-catch但catch块是空的。这种“静默失败”最坑出了问题一点日志都没有。第三种Promise链没有返回。比如在一个函数里启动了Promise链但没return出去调用方拿不到这个Promise也就没法catch。提示开发阶段建议在链条末尾统一加一个catch并且catch里至少打一条日志。生产环境可以配合全局的unhandledrejection监听兜底。4.3 局部错误恢复的写法有时候某个步骤失败了我们不想中断整个流程而是想“降级处理”后继续。这时候可以在中间插入一个catch做恢复step1() .then(step2) .catch(err { console.warn(step2失败使用默认值, err); return defaultValue; // 返回默认值链条继续 }) .then(step3); // step3会拿到defaultValue这种写法叫“错误恢复”注意catch里一定要return一个值否则下一个then拿到undefined。这个技巧在处理“非关键步骤失败”时特别有用比如埋点上报失败不应该影响主流程。5. 实操从零搭一个完整的串联流程5.1 需求拆解假设我们要做一个“用户下单”的流程包含这几步校验库存、扣减库存、创建订单、发送通知。每一步都是异步的且后一步依赖前一步的结果。这是一个典型的串联场景。5.2 分步实现先定义各个步骤的函数每个都返回Promisefunction checkStock(productId, count) { return new Promise((resolve, reject) { setTimeout(() { if (count 0) { resolve({ productId, count, available: true }); } else { reject(new Error(库存不足)); } }, 100); }); } function deductStock(data) { return new Promise((resolve) { setTimeout(() { resolve({ ...data, deducted: true }); }, 100); }); } function createOrder(data) { return new Promise((resolve) { setTimeout(() { resolve({ ...data, orderId: ORD Date.now() }); }, 100); }); } function sendNotify(order) { return new Promise((resolve) { setTimeout(() { resolve({ ...order, notified: true }); }, 100); }); }然后串联起来checkStock(P001, 2) .then(data deductStock(data)) .then(data createOrder(data)) .then(order sendNotify(order)) .then(result { console.log(下单成功, result.orderId); }) .catch(err { console.error(下单失败, err.message); });5.3 参数传递的优化上面这种写法每一步都要data fn(data)有点啰嗦。因为每个函数只接收一个参数可以直接简写成checkStock(P001, 2) .then(deductStock) .then(createOrder) .then(sendNotify) .then(result console.log(下单成功, result.orderId)) .catch(err console.error(下单失败, err.message));这样清爽多了。但要注意只有当函数签名和上一步返回值完全匹配时才能这样简写。如果函数需要额外参数就得用箭头函数包一层。5.4 加入并行环节如果“发送通知”和“记录日志”可以并行可以这样改checkStock(P001, 2) .then(deductStock) .then(createOrder) .then(order { return Promise.all([ sendNotify(order), writeLog(order) ]).then(([notifyResult, logResult]) { return { ...order, notifyResult, logResult }; }); }) .then(result console.log(全部完成, result)) .catch(err console.error(失败, err));这里在链条中间插入了一个Promise.all把两个独立操作并行化整体耗时从“通知日志”变成“max(通知, 日志)”。这种“串联中嵌套并行”的模式在实际项目里非常常见。6. 常见问题与排查技巧6.1 问题速查表现象可能原因排查方向后面的then拿不到前面的值前面then没return检查每个then回调的返回值链条提前执行完then里调了异步但没return检查异步调用前是否有return错误没被catch捕获catch位置不对或链条没返回确认catch在末尾函数有return执行顺序混乱混用了回调和Promise统一改成Promise风格Promise.all结果顺序不对误以为按完成顺序结果顺序与传入顺序一致6.2 几个实用的调试技巧第一个技巧在链条中间插入“探针then”。调试时可以在任意位置插入.then(v { console.log(到这里, v); return v; })既能看到中间值又不影响链条继续。这个技巧我用了很多年比打断点还方便。第二个技巧用async/await改写来对比。如果一段Promise串联怎么看都不对试着用async/await重写一遍往往一眼就能看出问题在哪。因为async/await把串联的“隐式”变成了“显式”逻辑更直观。第三个技巧注意微任务时序。Promise的回调是微任务会在当前同步代码执行完后立即执行。如果发现Promise的回调和setTimeout的顺序跟预期不符多半是没搞清楚微任务和宏任务的优先级。6.3 避坑经验我踩过最深的一个坑是在循环里创建Promise链。比如想按顺序处理一个数组写成了// 错误写法 arr.forEach(item { doSomething(item).then(...); });这样每个item的Promise是并行跑的不是顺序的。正确做法是用reduce串起来arr.reduce((chain, item) { return chain.then(() doSomething(item)); }, Promise.resolve());这个写法第一次见会觉得有点绕但它是“顺序执行数组异步任务”的标准套路值得记住。另一个坑是Promise构造函数里的错误。在new Promise((resolve, reject) {...})里如果同步代码抛错Promise会自动reject这个没问题。但如果在resolve之后又抛错那个错误会被忽略。所以executor里要小心别在resolve后面还写可能出错的代码。7. 从串联到async/await的平滑过渡Promise串联写多了你会发现有些场景用async/await会更舒服。async/await本质上是Promise的语法糖它把then链变成了看起来像同步代码的写法。async function placeOrder() { try { const stock await checkStock(P001, 2); const deducted await deductStock(stock); const order await createOrder(deducted); const result await sendNotify(order); console.log(下单成功, result.orderId); } catch (err) { console.error(下单失败, err.message); } }同样的逻辑async/await版本读起来更线性错误处理用try-catch也更符合直觉。但要注意async/await并没有取代Promise它只是换了一种写法。理解Promise串联的机制才能在用async/await时知道背后发生了什么遇到问题也能快速定位。我个人在实际操作中的体会是简单的两三步串联用then链就够了步骤多、逻辑复杂、需要条件分支的场景果断上async/await。两者不是对立的而是同一套机制的不同表达方式混着用也没问题。关键是把底层机制吃透用哪种写法都心里有数。