异步流程控制_Promise链式调用

Promise通过链式调用解决回调地狱，每次.then()返回新Promise，根据返回值决定后续执行：普通值直接传递，Promise则等待其resolve，错误由.catch()捕获并可恢复流程，适用于串行异步任务与集中错误处理。

在JavaScript中处理异步操作时，回调函数曾是主流方式，但随着代码复杂度上升，容易陷入“回调地狱”。Promise的出现解决了这一问题，通过链式调用让异步流程更清晰、可控。核心在于每个Promise实例可以返回一个新的Promise，从而实现.then()的串联。

Promise链式调用的基本原理

每次调用.then()都会返回一个新的Promise对象，这个新Promise的状态取决于回调函数的返回值：

• 如果回调中返回一个普通值（非Promise），下一个.then()会接收到该值作为参数，并立即执行
• 如果返回的是一个Promise，则后续.then()会等待该Promise resolve后再执行
• 若抛出异常或返回被拒绝的Promise，会跳转到最近的.catch()

Promise.resolve(1)
  .then(res => {
    console.log(res); // 输出 1
    return res + 1;
  })
  .then(res => {
    console.log(res); // 输出 2
    return Promise.resolve(3);
  })
  .then(res => {
    console.log(res); // 输出 3
  });

错误处理与链式中断

Promise链支持集中错误处理。任意环节发生reject或throw错误，都会跳过后续成功的.then()，直到遇到.catch()

歌者PPT

歌者PPT，AI 写 PPT 永久免费

下载

• 可以在链尾添加.catch()统一捕获前面任何一步的异常
• 在中间使用.catch()可局部处理错误，并恢复链的执行（返回正常值或新Promise）
• 未被捕获的Promise错误会在浏览器或Node.js中触发全局警告

fetch('/api/data')
  .then(res => res.json())
  .then(data => {
    if (!data.ok) throw new Error('数据异常');
    return data.result;
  })
  .then(value => console.log('成功:', value))
  .catch(err => console.error('失败:', err));

串行控制多个异步任务

当需要按顺序执行多个异步操作（比如依次请求接口），链式调用天然适合这种场景

• 每一个.then()都可以发起新的异步操作，前一个完成后再进入下一个
• 适合用于依赖前一步结果的连续请求
• 相比Promise.all()，它不会并发执行，而是严格串行

function delay(time, value) {
  return new Promise(resolve => setTimeout(() => resolve(value), time));
}

delay(1000, '第一步')
  .then(step => {
    console.log(step);
    return delay(1000, '第二步');
  })
  .then(step => {
    console.log(step);
    return delay(1000, '第三步');
  })
  .then(step => console.log(step));