JavaScript中避免Promise嵌套导致的伪回调地狱

避免Promise嵌套的关键是**用链式调用代替层层then嵌套**，同时合理使用async/await让异步逻辑线性表达。

用return传递值，保持扁平链式结构

每个then()中返回新的Promise（或普通值），后续then()就能直接接收结果，无需嵌套：

❌ 错误：在then里再写then ✅ 正确：用return fetch(…).then(…)，让外层链自然承接

例如获取用户后再查其订单：

// 好：扁平链式fetch(‘/api/user’) .then(res => res.json()) .then(user => fetch(`/api/orders?uid=${user.id}`)) .then(res => res.json()) .then(orders => console.log(orders));

用async/await替代多层then

当逻辑分支变多、条件判断或错误处理复杂时，async/await更易读可控：

立即学习“Java免费学习笔记（深入）”；

函数声明加async，内部用await等待Promise完成 多个异步操作可像同步代码一样顺序书写，不缩进、不嵌套 可用try/catch统一捕获异常，比.catch()更直观

等价于上面的例子：

async function loadUserOrders() { try { const userRes = await fetch(‘/api/user’); const user = await userRes.json(); const orderRes = await fetch(`/api/orders?uid=${user.id}`); const orders = await orderRes.json(); console.log(orders); } catch (err) { console.error(‘加载失败’, err); }}

避免在then里手动new Promise

常见误区：在then回调中又写new Promise(…)并自行resolve/reject，这往往意味着本可用return或await简化：

如果只是想延迟执行，用setTimeout配合Promise.resolve().then(…)或直接await new Promise(r => setTimeout(r, 1000)) 如果是在封装回调API，优先用util.promisify（Node.js）或手写一次性的Promise包装，不要在业务逻辑中重复造轮子

合理拆分逻辑，用函数封装Promise链

把一类操作（如“根据ID获取资源+校验+格式化”）抽成独立的async函数，既复用又避免单个函数过长：

例如：async function getUserWithProfile(id) { … }、async function getOrdersByUser(user) { … } 主流程变成清晰的函数调用：const user = await getUserWithProfile(id); const orders = await getOrdersByUser(user);