在 JavaScript 异步编程的世界里，Promise 可是一个非常重要的工具。它就像是一个靠谱的信使，能帮助我们更好地处理异步操作，避免陷入令人头疼的回调地狱。今天，我们就来详细了解一下 Promise 是如何创建、状态如何变化，以及怎样通过链式调用解决异步问题的。

Promise 对象创建

什么是 Promise 对象

Promise 对象是 JavaScript 中用于处理异步操作的一种对象。简单来说，它就像是一个容器，里面装着一个未来才会完成的异步操作，并且会给出这个操作的结果。这个结果可能是成功（resolved），也可能是失败（rejected）。在创建 Promise 对象时，我们需要传入一个执行器函数，这个函数有两个参数，分别是 resolve 和 reject，它们是两个函数，用于改变 Promise 的状态。

创建 Promise 对象的代码示例

// 创建一个 Promise 对象
const myPromise = new Promise((resolve, reject) => {
    // 模拟一个异步操作，比如网络请求
    setTimeout(() => {
        const randomNumber = Math.random();
        if (randomNumber < 0.5) {
            // 操作成功，调用 resolve 函数，将 Promise 状态变为 resolved
            resolve('操作成功！');
        } else {
            // 操作失败，调用 reject 函数，将 Promise 状态变为 rejected
            reject('操作失败！');
        }
    }, 1000);
});

// 处理 Promise 的结果
myPromise
  .then((result) => {
        console.log(result);
    })
  .catch((error) => {
        console.error(error);
    });

在这段代码中，我们创建了一个 Promise 对象 myPromise。在执行器函数中，使用 setTimeout 模拟了一个异步操作，等待 1 秒后，根据随机数的大小决定操作是成功还是失败。如果随机数小于 0.5，调用 resolve 函数，将 Promise 的状态变为 resolved，并传递成功的消息；否则，调用 reject 函数，将 Promise 的状态变为 rejected，并传递失败的消息。最后，使用 then 方法处理成功的结果，使用 catch 方法处理失败的结果。

Promise 状态变化

Promise 的三种状态

Promise 对象有三种状态：

• pending（进行中）：这是 Promise 对象的初始状态，表示异步操作还在进行中，结果还未确定。
• fulfilled（已成功）：当异步操作成功完成时，Promise 的状态会从 pending 变为 fulfilled，此时可以通过 resolve 函数传递成功的结果。
• rejected（已失败）：当异步操作失败时，Promise 的状态会从 pending 变为 rejected，此时可以通过 reject 函数传递失败的原因。

状态变化的代码示例

// 创建一个 Promise 对象
const promise = new Promise((resolve, reject) => {
    console.log('Promise 初始状态：pending');
    setTimeout(() => {
        if (Math.random() < 0.5) {
            resolve('状态变为 fulfilled');
        } else {
            reject('状态变为 rejected');
        }
    }, 1000);
});

// 处理 Promise 的结果
promise
  .then((result) => {
        console.log(result);
    })
  .catch((error) => {
        console.error(error);
    });

在这段代码中，Promise 对象的初始状态是 pending。经过 1 秒的异步操作后，根据随机数的大小，状态会变为 fulfilled 或 rejected。如果状态变为 fulfilled，then 方法会被调用，输出成功的结果；如果状态变为 rejected，catch 方法会被调用，输出失败的原因。

Promise 链式调用解决异步问题

什么是 Promise 链式调用

在处理多个异步操作时，如果使用传统的回调函数，会导致代码嵌套层次过深，形成回调地狱，使代码难以阅读和维护。而 Promise 的链式调用可以很好地解决这个问题。通过 then 方法返回一个新的 Promise 对象，我们可以将多个异步操作按顺序连接起来，形成一个链式结构。

链式调用的代码示例

// 模拟一个异步操作，返回一个 Promise 对象
function asyncOperation1() {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log('异步操作 1 完成');
            resolve('结果 1');
        }, 1000);
    });
}

// 模拟另一个异步操作，返回一个 Promise 对象
function asyncOperation2(result) {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log(`异步操作 2 接收结果：${result}`);
            resolve('结果 2');
        }, 1000);
    });
}

// 模拟第三个异步操作，返回一个 Promise 对象
function asyncOperation3(result) {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log(`异步操作 3 接收结果：${result}`);
            resolve('最终结果');
        }, 1000);
    });
}

// 链式调用异步操作
asyncOperation1()
  .then(asyncOperation2)
  .then(asyncOperation3)
  .then((finalResult) => {
        console.log(`最终结果：${finalResult}`);
    })
  .catch((error) => {
        console.error(error);
    });

在这段代码中，我们定义了三个异步操作函数 asyncOperation1、asyncOperation2 和 asyncOperation3，每个函数都返回一个 Promise 对象。通过 then 方法将这三个异步操作按顺序连接起来，形成一个链式调用。每个 then 方法接收上一个异步操作的结果，并将其传递给下一个异步操作。最后，使用 then 方法处理最终结果，使用 catch 方法捕获可能出现的错误。

避坑：Promise 状态处理不当导致的程序异常

在使用 Promise 时，如果状态处理不当，可能会导致程序出现异常。比如，在 Promise 状态已经确定后，再次调用 resolve 或 reject 函数是无效的。另外，如果在 then 方法中没有正确处理 Promise 的状态，可能会导致错误被忽略。

错误示例

const wrongPromise = new Promise((resolve, reject) => {
    resolve('成功');
    // 状态已经变为 fulfilled，再次调用 reject 无效
    reject('错误');
});

wrongPromise
  .then((result) => {
        console.log(result);
    })
  .catch((error) => {
        console.error(error);
    });

在这段代码中，Promise 的状态已经通过 resolve 函数变为 fulfilled，此时再调用 reject 函数是无效的，不会改变 Promise 的状态。

正确处理方式

在编写代码时，要确保在 Promise 状态确定后，不再进行不必要的状态改变操作。同时，在 then 方法中要正确处理可能出现的错误，避免错误被忽略。

总结

通过本节的学习，我们掌握了 Promise 对象的创建、状态变化和链式调用。Promise 对象是处理 JavaScript 异步操作的强大工具，它可以帮助我们避免回调地狱，使代码更加清晰和易于维护。通过链式调用，我们可以将多个异步操作按顺序连接起来，提高代码的可读性和可维护性。同时，我们也了解了 Promise 状态处理不当可能导致的程序异常，并学会了如何避免这些问题。

掌握了 Promise 的相关内容后，下一节我们将深入学习 JavaScript 中的 async/await 语法糖，进一步完善对本章 JavaScript 异步编程主题的认知。

---

---

🍃 系列专栏导航

• 🔖 《深入浅出JavaScript》

---

建议按系列顺序阅读，从基础到进阶逐步掌握核心能力，避免遗漏关键知识点～

其他专栏衔接

• 🔖 《深入浅出C++》
• 🔖 《深入浅出CSS》
• 🔖 《深入浅出HTML》
• 🔖 《ES6从入门到精通》
• 🍃 博客概览：《程序员技术成长导航，专栏汇总》