深入理解 JavaScript Promise：异步编程的强大工具与实用技巧

什么是 Promise

在 JavaScript 中，异步编程是非常常见的，而 Promise 是其中一种处理异步操作的方式。Promise 对象表示一个尚未完成但即将完成的操作，它提供了一种替代回调函数的方式，能更好地处理异步代码的逻辑。Promise 使得异步代码看起来更像同步代码，从而提升了代码的可读性和可维护性。

Promise 的特点

• Pending（待定）: 初始状态，既没有被兑现（Fulfilled），也没有被拒绝（Rejected）。

• Fulfilled（已兑现）: 操作成功完成，并且有一个结果值。

• Rejected（已拒绝）: 操作失败，并且有一个拒绝理由。

Promise 的基本用法

Promise 的核心在于它通过链式调用 .then() 和 .catch() 方法，使得处理异步操作更加直观和简洁。

const promise = new Promise((resolve, reject) => {
    const success = true;
    if (success) {
        resolve("操作成功");
    } else {
        reject("操作失败");
    }
});

promise.then(result => {
    console.log(result); // 操作成功
}).catch(error => {
    console.error(error); // 如果失败，输出操作失败
});

创建 Promise 对象

你可以通过 new Promise() 的方式来创建一个 Promise 对象，构造函数接收一个执行器函数，该函数包含两个参数：resolve 和 reject。在执行器函数内，你可以根据条件调用 resolve() 传递成功值，或调用 reject() 传递错误信息。

const myPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("数据加载成功");
    }, 2000);
});

then 方法

then() 方法是 Promise 最基本的用法，它用于在 Promise 成功兑现时执行某个操作。它接收两个参数，第一个是处理成功的回调，第二个是处理失败的回调。

myPromise.then(result => {
    console.log(result); // 数据加载成功
});

resolve/reject

resolve() 和 reject() 是 Promise 内部用来处理状态的两个方法。resolve() 表示异步操作成功，并将结果传递出去，而 reject() 则表示异步操作失败，并传递错误信息。

const promise = new Promise((resolve, reject) => {
    if (true) {
        resolve("成功");
    } else {
        reject("失败");
    }
});

catch 方法

catch() 方法用于处理 Promise 的拒绝状态，相当于 then(null, rejection)。如果 Promise 链中的任何一个环节出现错误，它会被捕获并传递到 catch() 中。

promise.catch(error => {
    console.error("捕获到错误:", error);
});

常用方法

Promise.all()

Promise.all() 方法接收一个 Promise 的数组，并返回一个新的 Promise。当所有 Promise 都成功时，它才会被兑现，并返回一个数组包含每个 Promise 的结果；如果有任何一个 Promise 被拒绝，它会立即被拒绝，并返回该 Promise 的拒绝值。

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
    setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values); // [3, 42, "foo"]
});

Promise.allSettled()

Promise.allSettled() 方法接收一个 Promise 的数组，返回一个新的 Promise，当所有 Promise 都已完成

const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, '错误'));

Promise.allSettled([promise1, promise2]).then((results) => 
    results.forEach((result) => console.log(result.status))
);
// "fulfilled", "rejected"

（无论成功或失败）时，它会被兑现，并返回每个 Promise 的结果和状态。

Promise.race()

Promise.race() 方法接收一个 Promise 的数组，并返回一个新的 Promise，一旦其中的一个 Promise 兑现或拒绝，这个新的 Promise 就会以相同的值兑现或拒绝。

const promise1 = new Promise((resolve, reject) => {
    setTimeout(resolve, 500, "第一个完成");
});
const promise2 = new Promise((resolve, reject) => {
    setTimeout(resolve, 100, "第二个完成");
});

Promise.race([promise1, promise2]).then((result) => {
    console.log(result); // 第二个完成
});

Promise.any()

Promise.any() 方法接收一个 Promise 的数组，并返回一个新的 Promise。一旦其中的一个 Promise 成功兑现，它就会以那个值兑现；如果所有 Promise 都被拒绝，则返回拒绝。

const promise1 = Promise.reject(0);
const promise2 = new Promise((resolve) => setTimeout(resolve, 100, '快速'));
const promise3 = new Promise((resolve) => setTimeout(resolve, 500, '慢速'));

Promise.any([promise1, promise2, promise3]).then((value) => {
  console.log(value); // "快速"
});

Promise.finally()

finally() 方法添加了一个回调函数，在 Promise 被兑现或拒绝后，无论结果如何，都会执行这个回调函数。它常用于清理操作，比如关闭连接或销毁对象。

promise.finally(() => {
    console.log("清理操作");
});

结语

Promise 是 JavaScript 异步编程的重要工具，它大大简化了异步操作的处理。通过了解 Promise 的基本用法及其常用方法，你可以更好地编写清晰、易于维护的异步代码。在实际开发中，掌握并熟练运用这些方法将帮助你处理复杂的异步逻辑，提升代码的健壮性和可读性。