Promise 基础概念与实践详解

在支持 ES6 的高级浏览器环境中，我们通过 new Promise() 即可构造一个 Promise 实例。这个构造函数接受一个函数作为参数，该函数分别接收两个参数 resolve 和 reject，用于将当前实例的状态改变为 已完成 或 已拒绝。

一、Promise 实例与构造函数核心特性

• 实例方法 ：Promise 实例可通过 .then 方法注册回调函数，根据实例状态（已完成/已拒绝）执行对应回调。
• 状态控制 ：通过 new Promise() 构造函数的回调函数可动态更改实例状态。
• 本质：Promise 并非新语法，而是一个新函数。
• 执行机制：Promise 同步注册，异步执行。

二、Promise 链式调用示例

function promise1() {
    return new Promise(function(resolve, reject) {
        // 定义异步操作
        setTimeout(function() {
            console.log('1s 后输出');
            // 执行 resolve 标记为已完成，继续执行 then 链
            resolve();
        }, 1000);
    });
}

function promise2() {
    return new Promise(function(resolve) {
        setTimeout(function() {
            console.log('2s 后输出');
            resolve();
        }, 2000);
    });
}

// 链式调用写法
promise1().then(function() { return promise2(); });
// 简写形式
promise1().then(promise2);

执行结果：1 秒后输出 "1s 后输出"，再过 2 秒输出 "2s 后输出"。

核心逻辑 ：当 Promise 状态变为 已完成 （调用 resolve），则执行 .then 中的下一个 Promise 函数；若状态变为 已拒绝 （调用 reject），则进入异常处理函数。

三、Promise 状态处理与参数传递

function promise3() {
    return new Promise(function(resolve, reject) {
        const random = Math.random() * 10; // 生成 0-10 的随机数
        setTimeout(function() {
            if (random >= 5) {
                resolve(random); // 状态变为已完成，传递参数
            } else {
                reject(random);  // 状态变为已拒绝，传递参数
            }
        }, 1000);
    });
}

const onResolve = function(val) {
    console.log('已完成: 输出的数字是', val);
};

const onReject = function(val) {
    console.log('已拒绝: 输出的数字是', val);
};

// 方式1：通过 then 接收两个回调
promise3().then(onResolve, onReject);

// 方式2：通过 catch 捕获异常
promise3().catch(onReject).then(onResolve);

// 方式3：通过 try catch 拦截
try {
    promise3().then(onResolve);
} catch (e) {
    onReject(e);
}

关键说明：

• 三种方式可拦截 已拒绝 状态的 Promise：then 的第二个参数、.catch 方法、try catch。
• resolve 和 reject 可传递参数，供后续 .then 回调接收。

四、Promise 核心概念总结

1. 状态机制

   • Promise 有三种状态：进行中（pending） 、已完成（fulfilled） 、已拒绝（rejected）。
   • 状态仅能从 pending 转为 fulfilled 或 rejected，且一旦变更不可逆转。

2. 构造函数

   • ES6 中通过 new Promise(executor) 构造实例，executor 接收 resolve 和 reject 函数。
   • 执行 resolve 使状态变为 fulfilled，执行 reject 使状态变为 rejected。

3. 链式调用

   • 通过 .then 方法在 Promise 状态为 fulfilled 时继续执行后续逻辑。
   • resolve/reject 传递的参数可被后续 .then 回调获取。

4. 异常处理

   • 已拒绝的 Promise 可通过 .catch、then 的第二个参数或 try catch 捕获处理。