Promise错误处理指南：then与catch的差异解析（基于promises-book项目）

前言

在Promise的使用过程中，错误处理是一个至关重要的环节。许多开发者在使用Promise时，对于.then的第二个参数（onRejected）和.catch的区别感到困惑。本文将深入探讨这两种错误处理方式的异同，帮助开发者写出更健壮的异步代码。

基本概念回顾

在Promise中，.catch(onRejected)实际上是.then(null, onRejected)的语法糖。虽然它们在功能上相似，但在实际使用中却有着微妙的差异，这些差异往往会影响错误处理的正确性。

错误处理模式对比

模式一：在then中同时指定onFulfilled和onRejected

promise.then(onFulfilled, onRejected)

这种模式下，onRejected只能捕获：

1. 当前promise被拒绝的情况
2. 在它之前（链中）发生的错误

但它不能捕获onFulfilled函数本身抛出的异常。

模式二：链式调用then和catch

promise.then(onFulfilled).catch(onRejected)

这种模式下，catch可以捕获：

1. 原始promise被拒绝的情况
2. then中onFulfilled抛出的异常
3. 整个链中任何地方抛出的错误

实际案例分析

让我们通过一个具体例子来说明这两种模式的差异：

function throwError() {
    throw new Error("出错了！");
}

// 不良实践
function badMain(callback) {
    Promise.resolve(42)
        .then(throwError, () => {
            callback(); // 这行不会被执行
        });
}

// 推荐做法
function goodMain(callback) {
    Promise.resolve(42)
        .then(throwError)
        .catch(() => {
            callback(); // 这里会正常捕获错误
        });
}

在badMain中，即使throwError抛出异常，then的第二个参数（onRejected）也不会被调用。而在goodMain中，catch能够成功捕获throwError抛出的异常。

原理深入解析

这种差异源于Promise链的工作机制：

1. 每个.then或.catch都会返回一个全新的Promise对象
2. onRejected只能处理它所属Promise之前（上游）的拒绝
3. onFulfilled中抛出的异常属于下游Promise的范畴

Promise.resolve(42)  // 原始Promise
    .then(throwError)  // 创建新PromiseA
    .then(null, onRejected)  // 创建新PromiseB

在上面的链中：

• onRejected属于PromiseB
• 它只能处理PromiseA被拒绝的情况
• 但throwError是在PromiseA的onFulfilled中抛出的，这会导致PromiseA被拒绝
• 然而这个拒绝会被PromiseB的onRejected处理吗？不会！

最佳实践建议

1. 优先使用.catch：意图更明确，能捕获链中所有错误
2. 保持一致性：在项目中统一错误处理风格
3. 考虑可读性：.catch使错误处理更集中，便于维护
4. 特殊情况：当需要区分不同来源的错误时，可以使用then的第二个参数

常见误区

1. 认为then的第二个参数能捕获第一个参数中的错误
2. 忽略每个then都会创建新Promise的事实
3. 过度嵌套的Promise链使错误处理复杂化
4. 忘记返回Promise导致链断裂

总结

理解.then和.catch在错误处理上的差异是掌握Promise的关键。记住以下要点：

• .then(onFulfilled, onRejected)中的onRejected不能捕获onFulfilled中的错误
• .catch能够捕获整个链中任何地方抛出的错误
• 从代码可读性和维护性考虑，推荐使用.catch进行错误处理
• 每个Promise方法调用都会返回新对象，这影响了错误的传播方式

通过合理选择错误处理方式，可以构建出更健壮、更易维护的异步JavaScript代码。