在现代JavaScript开发中，Promise作为一种处理异步操作的强大工具，已经成为开发者的必备技能。它不仅简化了异步编程的复杂性，还使得代码更易于阅读和维护。然而，许多开发者在使用Promise时仍然存在误解或混淆的地方。本文将通过多个示例，深入解析Promise的执行结果，帮助你更好地理解这一重要概念。

Promise的基本概念

首先，Promise是一个代表了某个未来才会结束的操作的对象。它有三种状态：Pending（待定）、Fulfilled（已完成）和Rejected（已拒绝）。状态的变化只能由Pending转变为Fulfilled或Rejected，一旦状态改变，就不会再改变。

示例1：Promise的基本执行流程

const promise = new Promise((resolve, reject) => {
    console.log(1);
    resolve(5);
    console.log(2);
});

promise.then((res) => {
    console.log(3, res);
});
console.log(4);

执行结果：

1
2
4
3 5

解释： 在这个例子中，Promise创建后立即执行，输出1和2。resolve函数的调用发生在同步代码之后，因此“4”会在“3”之前输出。最终，Promise的then方法在resolve被调用后执行。

示例2：同一个Promise中resolve和reject的顺序

const promise = new Promise((resolve, reject) => {
    resolve(1);
    reject(2);
    resolve(3);
});

promise.then((res) => {
    console.log("then:", res);
}).catch(err => {
    console.log("catch", err);
});

执行结果：

then: 1

解释： 尽管我们在Promise内部调用了reject和多个resolve，但Promise的状态只能改变一次。首次调用resolve(1)后，Promise的状态变为Fulfilled，后续的reject和resolve调用被忽略。

示例3：Promise的多次then调用

const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log(1);
        resolve(2);
    }, 1000);
});

const start = Date.now();
promise.then((res) => {
    console.log(res, Date.now() - start);
});
promise.then(res => {
    console.log(res, Date.now() - start);
});

执行结果：

1
2 1001
2 1001

解释： 在这个例子中，Promise的状态改变后，所有的then方法都会被触发。两个then方法都接收到了相同的结果，且输出的时间差几乎相同，说明它们都是在Promise状态改变后立即执行的。

示例4：在then中返回异常

const promise = new Promise((resolve, reject) => {
    resolve(20);
});

promise.then((res) => {
    console.log(res);
    return new Error("Error");
}).then(res => {
    console.log(22);
    console.log('then', res);
}).catch(err => {
    console.log("Error", err);
});

执行结果：

20
22
then Error

解释： 在then中返回一个异常不会触发catch，因为这里的返回值是一个普通的Error对象，而不是抛出异常。后续的then方法会正常执行，并将返回值作为参数传递。

示例5：then参数的使用

const promise = new Promise((resolve, reject) => {
    resolve(20);
});

promise.then(21)
    .then(res => {
        console.log('then', res);
    })
    .then(Promise.resolve(34))
    .catch(err => {
        console.log("Error", err);
    });

执行结果：

then undefined

解释： 当将非函数的值（如数字21）传递给then时，由于then的参数应该是一个函数，这导致了“穿透现象”。即then会忽略这个值，继续执行后面的then。

结论

通过以上的实例，我们可以看到Promise在处理异步操作时的灵活性和复杂性。掌握Promise的使用，不仅能够提升代码的可读性，更能有效避免回调地狱的问题。希望本文的示例能够帮助你更好地理解Promise的执行结果及其行为特征。在实际开发中，合理运用Promise，将极大地提升你的开发效率和代码质量。