详解ES6 Promise的生命周期和创建

详解ES6 Promise的生命周期和创建

1. Promise的生命周期

Promise 对象的生命周期包含了三个状态：等待 pending、已完成 fulfilled 和已拒绝 rejected。

在创建 Promise 对象之后，初始状态为等待 pending。之后根据异步操作执行情况，在处理完成时，将会出现状态转移：

• pending -> fulfilled
• pending -> rejected

尝试对 Promise 加以解释：

const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("成功执行异步任务");
    }, 2000);
});

promise.then((value) => {
    console.log(value); // 成功执行异步操作
});

上述代码中，使用了 Promise 封装了一个异步任务，当异步任务执行成功后，Promise 对象状态改为 fulfilled 状态。接着可以通过在调用 then() 方法中，获取到异步操作返回的结果值。

而如果异步任务过程中发生了错误，Promise 对象状态将会转换为 rejected 状态：

const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        reject(new Error("异步任务执行失败！"));
    }, 2000);
});

promise.catch((error) => {
    console.log(error.message); // 异步任务执行失败！
});

当异步任务发生错误时，我们通过执行 reject() 方法，将会 Promise 对象状态转为 rejected 状态，接着在调用 catch() 方法中获取到异步操作返回的错误信息。

2. Promise的创建

在 ES6 中，创建 Promise 的方式非常简单，使用 new Promise() 然后传递一个回调函数，在回调函数里去执行异步操作即可。

以下两个示例会详细讲解如何创建 Promise 对象：

2.1. Promise的基础创建

const promise = new Promise((resolve, reject) => {
    // 异步任务代码块
    // 执行成功调用 resolve(value) 方法
    // 执行失败时调用 reject(reason) 方法
});

使用如上方法创建的 Promise 对象，最终执行结果只能在 then() 或 catch() 中执行，或者是 Promise.all()、Promise.race() 等等调用方法中触发的执行结果。否则，异步操作的执行结果将无法被获取到。

2.2. Promise.all() 和 Promise.race() 的使用

上述提到的两个方法，主要针对多个 Promise 对象的执行结果进行处理。

• Promise.all()：将多个 Promise 对象封装成一个 Promise 数组后，通过该方法去处理所有 Promise 对象结果。
• Promise.race()：将多个 Promise 对象封装成一个 Promise 数组后，无需等待所有 Promise 对象执行完成，当其中任意一个 Promise 对象状态改变后，执行 then() 或 catch() 方法。

以下是使用 Promise.all() 方法的示例代码：

const promise1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("异步任务一");
    }, 2000);
});

const promise2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("异步任务二");
    }, 1000);
});

Promise.all([promise1, promise2]).then((value) => {
    console.log(value); // ["异步任务一", "异步任务二"]
});

当 Promise.all() 方法接收到的所有 Promise 对象状态都转为 fulfilled 状态后，执行 then() 方法。在 then() 方法内部，可以获取到所有异步操作执行的结果值。

以下是使用 Promise.race() 方法的示例代码：

const promise1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("异步任务一");
    }, 2000);
});

const promise2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("异步任务二");
    }, 1000);
});

Promise.race([promise1, promise2]).then((value) => {
    console.log(value); // 异步任务二
});

当 Promise.race() 方法接收到的其中一个 Promise 对象状态改变后，立即执行 then() 方法。在 then() 方法内部，只可以获取到该异步操作执行的结果值。