深入浅出Promise六大静态方法的底层源码解析

2024-01-17 22:24:53

释放 Promise 的威力：探索 6 个静态方法及其源码实现

在当今的技术世界中，异步编程正变得越来越普遍。作为 JavaScript 中异步编程的核心，Promise 为我们提供了强大的工具来管理异步操作，使其更加容易和高效。而 Promise 的静态方法更是锦上添花，为我们提供了处理各种异步场景的强大能力。

本文将深入剖析 Promise 的 6 个静态方法：.then(), .catch(), .all(), .race(), .any() 和 .resolve()/.reject(), 探究其源码实现，并通过具体示例来演示其用法。通过本文，你将对 Promise 的静态方法有一个更加透彻的理解，并能够在实际项目中熟练地应用它们。

1. `.then()` 和 `.catch()`：处理 Promise 的结果

.then() 和 .catch() 是 Promise 最常用的静态方法。它们允许我们为 Promise 添加回调函数，以便在 Promise 成功完成或失败时执行相应的处理逻辑。

1.1 `.then()`：处理成功的 Promise

const promise = Promise.resolve('Hello, world!');

promise.then((result) => {
  console.log(result); // 输出: "Hello, world!"
});

在上面的示例中，.then() 方法接收一个回调函数作为参数，当 Promise 成功完成时，该回调函数将被调用，并将 Promise 的结果作为参数传递给该函数。

1.2 `.catch()`：处理失败的 Promise

const promise = Promise.reject(new Error('Oops, something went wrong!'));

promise.catch((error) => {
  console.error(error); // 输出: Error: Oops, something went wrong!
});

与 .then() 方法类似，.catch() 方法也接收一个回调函数作为参数，但该回调函数仅在 Promise 失败时被调用，并将 Promise 失败的原因作为参数传递给该函数。

2. `.all()`：并行处理多个 Promise

.all() 方法允许我们并行处理多个 Promise。它接收一个 Promise 数组作为参数，并返回一个新的 Promise。当所有传入的 Promise 都成功完成时，该新的 Promise 才被认为是成功完成的，并将所有 Promise 的结果作为数组形式传递给 .all() 方法的回调函数。

const promise1 = Promise.resolve('Hello, world!');
const promise2 = Promise.resolve('Goodbye, world!');

Promise.all([promise1, promise2]).then((results) => {
  console.log(results); // 输出: ["Hello, world!", "Goodbye, world!"]
});

在上面的示例中，.all() 方法将 promise1 和 promise2 作为参数，并返回一个新的 Promise。当 promise1 和 promise2 都成功完成时，该新的 Promise 被认为是成功完成的，并将 promise1 和 promise2 的结果作为数组形式传递给 .all() 方法的回调函数。

3. `.race()`：等待最快的 Promise 完成

.race() 方法与 .all() 方法类似，但它不是等待所有传入的 Promise 都成功完成，而是等待最快的 Promise 完成。它接收一个 Promise 数组作为参数，并返回一个新的 Promise。当传入的 Promise 中的任何一个成功完成时，该新的 Promise 被认为是成功完成的，并将最快的 Promise 的结果作为参数传递给 .race() 方法的回调函数。

const promise1 = Promise.resolve('Hello, world!');
const promise2 = new Promise((resolve) => {
  setTimeout(() => {
    resolve('Goodbye, world!');
  }, 1000);
});

Promise.race([promise1, promise2]).then((result) => {
  console.log(result); // 输出: "Hello, world!"
});

在上面的示例中，.race() 方法将 promise1 和 promise2 作为参数，并返回一个新的 Promise。当 promise1 成功完成时，该新的 Promise 被认为是成功完成的，并将 promise1 的结果作为参数传递给 .race() 方法的回调函数。

4. `.any()`：处理第一个成功的 Promise

.any() 方法与 .all() 方法和 .race() 方法不同，它不是等待所有传入的 Promise 都成功完成，也不是等待最快的 Promise 完成，而是等待第一个成功的 Promise 完成。它接收一个 Promise 数组作为参数，并返回一个新的 Promise。当传入的 Promise 中的任何一个成功完成时，该新的 Promise 被认为是成功完成的，并将第一个成功的 Promise 的结果作为参数传递给 .any() 方法的回调函数。

const promise1 = Promise.resolve('Hello, world!');
const promise2 = Promise.reject(new Error('Oops, something went wrong!'));

Promise.any([promise1, promise2]).then((result) => {
  console.log(result); // 输出: "Hello, world!"
});

在上面的示例中，.any() 方法将 promise1 和 promise2 作为参数，并返回一个新的 Promise。当 promise1 成功完成时，该新的 Promise 被认为是成功完成的，并将 promise1 的结果作为参数传递给 .any() 方法的回调函数。

5. `.resolve()` 和 `.reject()`：创建新的 Promise

.resolve() 和 .reject() 方法允许我们创建新的 Promise。.resolve() 方法接收一个值作为参数，并返回一个新的 Promise，该 Promise 的状态为成功，并将该值作为结果。.reject() 方法接收一个错误对象作为参数，并返回一个新的 Promise，该 Promise 的状态为失败，并将该错误对象作为原因。

const promise1 = Promise.resolve('Hello, world!');
const promise2 = Promise.reject(new Error('Oops, something went wrong!'));

在上面的示例中，.resolve() 方法创建了一个新的 Promise，该 Promise 的状态为成功，并将字符串 "Hello, world!" 作为结果。.reject() 方法创建了一个新的 Promise，该 Promise 的状态为失败，并将一个新的 Error 对象作为原因。