Promise使用手册：从基础到进阶的完整指南

一、Promise基础概念解析

Promise是JavaScript中处理异步操作的核心对象，其设计初衷是解决传统回调函数（Callback）的嵌套地狱问题。它通过状态机模型（Pending/Fulfilled/Rejected）将异步结果标准化，使代码更易维护。

1.1 三种状态与不可逆性

• Pending（待定）：初始状态，表示操作尚未完成
• Fulfilled（已兑现）：操作成功完成，必须包含一个值（value）
• Rejected（已拒绝）：操作失败，必须包含一个原因（reason）

状态转换具有单向性：Pending→Fulfilled或Pending→Rejected，一旦转换不可逆转。这种设计避免了状态竞争问题。

1.2 基础语法结构

const promise = new Promise((resolve, reject) => {
  // 异步操作
  if (/* 成功条件 */) {
    resolve(value); // 状态转为Fulfilled
  } else {
    reject(reason); // 状态转为Rejected
  }
});

二、核心方法与链式调用

2.1 then()方法详解

then()是Promise的核心方法，接收两个可选参数：

promise.then(
  onFulfilled, // 成功回调
  onRejected   // 失败回调（可选）
);

关键特性：

• 返回新Promise，支持链式调用
• 回调函数非必需，可省略任一参数
• 回调执行时机：在当前执行栈清空后的微任务队列中执行

2.2 catch()错误处理

catch()是then(null, onRejected)的语法糖：

promise
  .then(handleSuccess)
  .catch(handleError); // 捕获前序所有错误

最佳实践：

• 始终在链式调用末尾添加catch()
• 避免在then()的第二个参数中处理错误，可能导致错误被静默忽略

2.3 finally()统一收尾

finally()无论Promise状态如何都会执行：

fetch(url)
  .then(processData)
  .catch(handleError)
  .finally(() => {
    // 清理操作（如隐藏加载指示器）
  });

三、静态方法与组合操作

3.1 Promise.resolve()与Promise.reject()

快速创建已解决/已拒绝的Promise：

const fulfilled = Promise.resolve(42);
const rejected = Promise.reject(new Error('Failed'));

3.2 Promise.all()并行执行

接收Promise数组，全部成功时返回结果数组，任一失败立即返回错误：

Promise.all([fetchA(), fetchB()])
  .then(([resultA, resultB]) => {
    // 处理两个结果
  })
  .catch(handleError);

适用场景：需要同时获取多个独立资源时

3.3 Promise.race()竞速机制

第一个确定状态的Promise决定结果：

const timeout = new Promise((_, reject) => 
  setTimeout(() => reject(new Error('Timeout')), 5000)
);
Promise.race([fetchData(), timeout])
  .then(handleData)
  .catch(handleTimeout);

3.4 Promise.allSettled()完整结果

无论成功失败都返回结果对象数组：

Promise.allSettled([fetchA(), fetchB()])
  .then(results => {
    results.forEach(result => {
      if (result.status === 'fulfilled') {
        console.log('Success:', result.value);
      } else {
        console.log('Failed:', result.reason);
      }
    });
  });

四、进阶技巧与实战案例

4.1 错误处理最佳实践

分层错误处理：

fetchData()
  .then(data => {
    if (!data.valid) {
      throw new Error('Invalid data'); // 转换为Rejected状态
    }
    return processData(data);
  })
  .then(result => {
    // 成功处理
  })
  .catch(error => {
    if (error.message === 'Invalid data') {
      // 业务逻辑错误
    } else {
      // 系统级错误
    }
  });

4.2 延迟与重试机制

实现带重试的请求：

function fetchWithRetry(url, retries = 3) {
  return new Promise((resolve, reject) => {
    const attempt = () => {
      fetch(url)
        .then(resolve)
        .catch(error => {
          if (retries-- > 0) {
            setTimeout(attempt, 1000); // 延迟重试
          } else {
            reject(error);
          }
        });
    };
    attempt();
  });
}

4.3 取消Promise模式

通过AbortController实现可取消操作：

function cancellableFetch(url) {
  const controller = new AbortController();
  const signal = controller.signal;
  const promise = fetch(url, { signal })
    .then(response => response.json());
  promise.cancel = () => controller.abort();
  return promise;
}
// 使用示例
const request = cancellableFetch('https://api.example.com');
request.then(/*...*/).catch(/*...*/);
// 需要取消时
// request.cancel();

五、常见问题与调试技巧

5.1 内存泄漏排查

典型场景：未清理的Promise链导致事件监听器残留
解决方案：

• 使用WeakRef管理资源
• 实现显式的取消机制
• 在组件卸载时中断Promise链

5.2 性能优化建议

• 避免在热路径中创建大量未处理的Promise
• 使用Promise.all()替代串行执行
• 对I/O密集型操作使用Promise池控制并发

5.3 调试工具推荐

• Chrome DevTools的Promise检查器
• Node.js的--inspect调试器
• 第三方库如promise-memoize进行缓存优化

六、ES2021+新特性

6.1 Promise.try模式（提案阶段）

模拟同步try/catch的异步版本：

// 当前实现方案
function tryCatch(fn) {
  return Promise.resolve().then(fn);
}
tryCatch(() => JSON.parse(invalidJson))
  .catch(handleError);

6.2 聚合错误处理

使用Promise.any()获取第一个成功的Promise：

Promise.any([fetchA(), fetchB(), fetchC()])
  .then(firstSuccess => {
    // 使用最快成功的响应
  })
  .catch(errors => {
    // 所有请求都失败时触发
  });

七、与Async/Await的协同使用

7.1 基本转换示例

// Promise版本
function getUser() {
  return fetch('/api/user')
    .then(res => res.json());
}
// Async/Await版本
async function getUser() {
  const res = await fetch('/api/user');
  return res.json();
}

7.2 错误处理对比

// Promise链式错误处理
promise
  .then(doSomething)
  .catch(handleError);
// Async/Await错误处理
async function run() {
  try {
    await promise;
    await doSomething();
  } catch (error) {
    handleError(error);
  }
}

7.3 性能考量

• Async/Await代码更易读，但生成器函数会产生额外开销
• 微任务队列处理机制与Promise完全一致
• 在性能敏感场景，Promise链式调用可能略有优势

八、企业级应用建议

1. 封装标准Promise库：

   class SafePromise {
     static wrap(fn) {
       return (...args) => new Promise((resolve, reject) => {
         try {
           resolve(fn(...args));
         } catch (error) {
           reject(error);
         }
       });
     }
   }
   // 使用示例
   const safeFetch = SafePromise.wrap(fetch);

2. 实现超时控制：

   function withTimeout(promise, ms) {
     const timeout = new Promise((_, reject) => 
       setTimeout(() => reject(new Error('Timeout')), ms)
     );
     return Promise.race([promise, timeout]);
   }

3. 日志记录中间件：

   function withLogging(promise, logger) {
     return promise
       .then(value => {
         logger.log('Promise fulfilled', value);
         return value;
       })
       .catch(error => {
         logger.error('Promise rejected', error);
         throw error;
       });
   }

九、总结与学习路径

掌握Promise需要经历三个阶段：

1. 基础阶段：理解状态机、链式调用、错误处理
2. 组合阶段：熟练运用静态方法实现复杂逻辑
3. 抽象阶段：封装可复用的Promise工具库

推荐学习资源：

• MDN Promise文档
• 《JavaScript高级程序设计》第11章
• Node.js官方文档中的Promise实现
• 参与开源项目中的异步代码审查

通过系统学习与实践，开发者可以构建出更健壮、可维护的异步代码架构，为复杂应用开发奠定坚实基础。