JavaScript Promise

在 JavaScript 中，Promise 是一种异步编程的解决方案，它代表一个在未来可能完成或失败的操作。Promise 可以帮助处理异步操作的回调地狱问题，并让代码更加清晰和易于维护。

1. Promise 的状态

每个 Promise 都有三种状态：

1. Pending（进行中）：初始状态，既没有完成也没有失败。
2. Fulfilled（已成功）：操作成功完成。
3. Rejected（已失败）：操作失败。

当 Promise 的状态从 Pending 变为 Fulfilled 或 Rejected 后，这个状态就不再变化（即 Promise 是不可逆的）。

2. 创建一个 Promise

可以通过 new Promise 来创建一个新的 Promise 对象。构造函数接收一个 executor 函数，executor 函数有两个参数：

• resolve：用于表示成功完成时的操作。
• reject：用于表示失败时的操作。

const myPromise = new Promise((resolve, reject) => {
    const success = true; // 模拟异步操作结果

    if (success) {
        resolve("操作成功！");
    } else {
        reject("操作失败！");
    }
});

3. 使用 then 和 catch

• then：当 Promise 成功时调用，接收一个处理结果的回调函数。
• catch：当 Promise 失败时调用，接收一个处理错误的回调函数。

myPromise
    .then((result) => {
        console.log(result); // "操作成功！"
    })
    .catch((error) => {
        console.error(error); // "操作失败！"
    });

4. 使用 finally

finally 方法会在 Promise 结束时，无论成功或失败都会执行，可以用于清理资源或结束操作。

myPromise
    .then((result) => {
        console.log(result);
    })
    .catch((error) => {
        console.error(error);
    })
    .finally(() => {
        console.log("操作结束");
    });

5. Promise 链式调用

多个异步操作可以通过链式调用的方式依次执行。每个 then 返回一个新的 Promise，所以可以继续调用下一个 then。

new Promise((resolve) => {
    resolve(1);
})
    .then((result) => {
        console.log(result); // 1
        return result + 1;
    })
    .then((result) => {
        console.log(result); // 2
        return result + 1;
    })
    .then((result) => {
        console.log(result); // 3
    });

6. Promise 静态方法

JavaScript 提供了一些 Promise 的静态方法来简化多个 Promise 的管理：

1. Promise.all(iterable)：接收一个 Promise 可迭代对象，等待所有 Promise 完成后返回一个包含所有结果的数组。如果有任意一个 Promise 失败，则返回失败的 Promise。

   const promise1 = Promise.resolve(1);
   const promise2 = Promise.resolve(2);
   const promise3 = Promise.resolve(3);
   
   Promise.all([promise1, promise2, promise3]).then((results) => {
       console.log(results); // [1, 2, 3]
   });
   

2. Promise.race(iterable)：接收一个 Promise 可迭代对象，返回第一个完成的 Promise 的结果。

   const promise1 = new Promise((resolve) => setTimeout(resolve, 100, "第一个完成"));
   const promise2 = new Promise((resolve) => setTimeout(resolve, 200, "第二个完成"));
   
   Promise.race([promise1, promise2]).then((result) => {
       console.log(result); // "第一个完成"
   });
   

3. Promise.allSettled(iterable)：接收一个 Promise 可迭代对象，等待所有 Promise 完成，不论结果是成功还是失败，返回每个 Promise 的结果对象数组。

   const promise1 = Promise.resolve(1);
   const promise2 = Promise.reject("失败");
   
   Promise.allSettled([promise1, promise2]).then((results) => {
       console.log(results);
       /*
       [
           { status: "fulfilled", value: 1 },
           { status: "rejected", reason: "失败" }
       ]
       */
   });
   

4. Promise.any(iterable)：接收一个 Promise 可迭代对象，返回第一个成功的 Promise 的结果。如果所有 Promise 都失败，则返回 AggregateError。

   const promise1 = Promise.reject("失败1");
   const promise2 = Promise.resolve("成功");
   const promise3 = Promise.reject("失败2");
   
   Promise.any([promise1, promise2, promise3]).then((result) => {
       console.log(result); // "成功"
   });
   

7. 实用示例

function fetchData(url) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            // 模拟异步请求
            const data = { user: "Alice", age: 25 };
            if (data) {
                resolve(data);
            } else {
                reject("数据加载失败");
            }
        }, 1000);
    });
}

fetchData("https://api.example.com/user")
    .then((data) => {
        console.log("获取的数据:", data);
    })
    .catch((error) => {
        console.error("发生错误:", error);
    });

总结

• Promise 是用于处理异步操作的对象。
• then 处理成功，catch 处理失败，finally 在结束时执行。
• Promise.all、Promise.race 等静态方法提供了处理多个 Promise 的便捷方式。