Promise错误处理

本章将详细介绍Promise中的错误处理机制，帮助您掌握如何正确捕获和处理异步操作中的错误，避免程序崩溃和未处理的异常。

4.1 Promise中的错误类型

在Promise中，错误可能来自多个方面：

同步错误

在Promise执行器函数中发生的同步错误会被自动捕获并导致Promise进入rejected状态。

示例：同步错误处理

// 同步错误会被自动捕获
const promise1 = new Promise((resolve, reject) => {
    throw new Error('同步错误');
});

promise1.catch(error => {
    console.error('捕获到错误:', error.message); // 输出: 捕获到错误: 同步错误
});

// 等价于
const promise2 = new Promise((resolve, reject) => {
    try {
        throw new Error('同步错误');
    } catch (error) {
        reject(error);
    }
});

异步错误

异步操作中的错误需要手动调用reject函数或抛出异常。

示例：异步错误处理

// 异步错误需要手动处理
const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        // 方式1: 调用reject
        reject(new Error('异步操作失败'));
        
        // 方式2: 抛出异常（同样有效）
        // throw new Error('异步操作失败');
    }, 1000);
});

promise.catch(error => {
    console.error('捕获到异步错误:', error.message);
});

4.2 catch方法的使用

catch方法是处理Promise错误的主要方式，它是.then(null, onRejected)的语法糖。

基本用法

示例：catch方法基本用法

// 基本的错误处理
const promise = new Promise((resolve, reject) => {
    reject(new Error('操作失败'));
});

promise.catch(error => {
    console.error('处理错误:', error.message);
});

// 等价于
promise.then(null, error => {
    console.error('处理错误:', error.message);
});

链式调用中的错误处理

在Promise链中，错误会沿着链向下传播，直到遇到catch方法。

示例：链式调用中的错误处理

// 错误在链中传播
Promise.resolve('初始值')
    .then(result => {
        console.log('第一步:', result);
        return '第二步结果';
    })
    .then(result => {
        console.log('第二步:', result);
        throw new Error('第三步出错');
    })
    .then(result => {
        // 这个then不会执行
        console.log('第三步:', result);
    })
    .catch(error => {
        console.error('捕获到错误:', error.message); // 输出: 捕获到错误: 第三步出错
    });

4.3 错误处理的最佳实践

正确处理Promise中的错误对于构建健壮的应用程序至关重要。

总是添加错误处理

每个Promise链都应该有相应的错误处理机制。

示例：完整的错误处理

// 好的做法：总是添加catch
fetchUserData(userId)
    .then(userData => {
        console.log('用户数据:', userData);
        return processUserData(userData);
    })
    .then(processedData => {
        console.log('处理后的数据:', processedData);
        return saveUserData(processedData);
    })
    .then(saveResult => {
        console.log('保存成功:', saveResult);
    })
    .catch(error => {
        console.error('操作失败:', error.message);
        // 可以在这里添加用户友好的错误提示
        showErrorMessage('操作失败，请稍后重试');
    });

局部错误处理

有时我们希望处理链中特定步骤的错误，而不影响后续步骤。

示例：局部错误处理

fetchUserData(userId)
    .then(userData => {
        console.log('用户数据:', userData);
        return processUserData(userData);
    })
    .catch(error => {
        // 处理获取用户数据的错误
        console.error('获取用户数据失败:', error.message);
        // 返回默认数据继续执行
        return getDefaultUserData();
    })
    .then(userData => {
        // 无论前面是否出错，都会执行到这里
        return saveUserData(userData);
    })
    .then(saveResult => {
        console.log('保存成功:', saveResult);
    })
    .catch(error => {
        // 处理其他错误
        console.error('操作失败:', error.message);
    });

4.4 Promise中的错误冒泡

Promise链中的错误会像JavaScript中的异常一样冒泡，直到被catch方法捕获。

示例：错误冒泡机制

Promise.resolve('初始值')
    .then(result => {
        console.log('第一步:', result);
        return Promise.resolve('第二步结果');
    })
    .then(result => {
        console.log('第二步:', result);
        // 这里抛出的错误会冒泡到最终的catch
        throw new Error('第二步出错');
    })
    .then(result => {
        // 这个then不会执行
        console.log('第三步:', result);
        return '第三步结果';
    })
    .then(result => {
        // 这个then也不会执行
        console.log('第四步:', result);
    })
    // 中间的catch可以处理局部错误
    .catch(error => {
        console.error('中间捕获:', error.message);
        // 如果这里不抛出错误，链会继续执行
        return '错误处理后的值';
    })
    .then(result => {
        console.log('错误处理后:', result); // 输出: 错误处理后: 错误处理后的值
    })
    .catch(error => {
        // 最终的错误处理
        console.error('最终捕获:', error.message);
    });

4.5 Promise中的未处理错误

未被处理的Promise错误可能会导致程序行为异常，现代浏览器通常会报告未处理的Promise拒绝。

示例：未处理的Promise错误

// 未处理的错误 - 不推荐
const promise = new Promise((resolve, reject) => {
    reject(new Error('未处理的错误'));
});

// 推荐的做法
const promise = new Promise((resolve, reject) => {
    reject(new Error('已处理的错误'));
});

promise.catch(error => {
    console.error('已处理:', error.message);
});

// 或者在创建时就处理
new Promise((resolve, reject) => {
    reject(new Error('立即处理的错误'));
}).catch(error => {
    console.error('立即处理:', error.message);
});

4.6 错误处理与finally方法

finally方法无论Promise成功还是失败都会执行，常用于清理工作。

示例：错误处理与finally结合

const loadingIndicator = showLoading();

fetchUserData(userId)
    .then(userData => {
        console.log('用户数据:', userData);
        displayUserData(userData);
    })
    .catch(error => {
        console.error('获取数据失败:', error.message);
        showErrorMessage('获取用户数据失败');
    })
    .finally(() => {
        // 无论成功还是失败都会执行
        hideLoading(loadingIndicator);
        console.log('请求完成');
    });

4.7 自定义错误类型

在复杂的应用中，可能需要定义自定义错误类型来更好地处理不同类型的错误。

示例：自定义错误类型

// 自定义错误类
class NetworkError extends Error {
    constructor(message) {
        super(message);
        this.name = 'NetworkError';
    }
}

class ValidationError extends Error {
    constructor(message) {
        super(message);
        this.name = 'ValidationError';
    }
}

// 使用自定义错误
function fetchUserData(userId) {
    return new Promise((resolve, reject) => {
        if (!userId) {
            reject(new ValidationError('用户ID不能为空'));
        }
        
        // 模拟网络请求
        setTimeout(() => {
            if (Math.random() > 0.5) {
                resolve({ id: userId, name: '用户' + userId });
            } else {
                reject(new NetworkError('网络连接失败'));
            }
        }, 1000);
    });
}

// 根据错误类型进行不同处理
fetchUserData(userId)
    .then(userData => {
        console.log('用户数据:', userData);
    })
    .catch(error => {
        if (error instanceof ValidationError) {
            console.error('验证错误:', error.message);
            showValidationMessage(error.message);
        } else if (error instanceof NetworkError) {
            console.error('网络错误:', error.message);
            showNetworkErrorMessage(error.message);
        } else {
            console.error('未知错误:', error.message);
            showGenericErrorMessage();
        }
    });

4.8 错误处理的常见陷阱

在处理Promise错误时，有一些常见的陷阱需要注意避免。

吞掉错误

在catch方法中不处理也不重新抛出错误会导致错误被吞掉。

示例：避免吞掉错误

// 错误的做法：吞掉错误
fetchUserData(userId)
    .then(userData => {
        console.log(userData);
    })
    .catch(error => {
        // 错误被吞掉，没有处理也没有重新抛出
        console.log('记录错误到日志');
    });

// 正确的做法：处理后重新抛出或显示给用户
fetchUserData(userId)
    .then(userData => {
        console.log(userData);
    })
    .catch(error => {
        // 记录错误到日志
        logError(error);
        // 显示用户友好的错误信息
        showErrorMessage('获取用户数据失败，请稍后重试');
        // 如果需要，重新抛出错误
        // throw error;
    });

在Promise构造函数中忘记调用reject

在Promise执行器函数中遇到错误时，必须调用reject或抛出异常。

示例：正确处理Promise构造函数中的错误

// 错误的做法：忘记处理错误
function badExample() {
    return new Promise((resolve, reject) => {
        try {
            const data = JSON.parse(invalidJsonString);
            resolve(data);
        } catch (error) {
            // 忘记调用reject
            console.error('解析JSON失败');
        }
    });
}

// 正确的做法：处理错误
function goodExample(invalidJsonString) {
    return new Promise((resolve, reject) => {
        try {
            const data = JSON.parse(invalidJsonString);
            resolve(data);
        } catch (error) {
            // 调用reject处理错误
            reject(new Error('JSON解析失败: ' + error.message));
        }
    });
}

提示：使用ESLint等工具可以帮助发现未处理的Promise错误。在开发过程中，始终要注意处理Promise的拒绝状态。