手把手教你用 JavaScript 手写 Promise （中篇）

深入剖析 Promise 的高级用法

JavaScript 中的 Promise 作为一种强大的工具，可用于处理异步操作。在本教程中，我们将深入探讨 Promise 的高级用法，包括 Promise.all(), Promise.race(), Promise.resolve() 和 Promise.reject()，帮助您掌握异步编程的精髓。

1. Promise.all()：齐心协力，共创辉煌

Promise.all() 方法允许您同时执行多个 Promise，并在所有 Promise 都执行完毕后，返回一个新的 Promise。该方法接受一个 Promise 数组作为参数，并返回一个新的 Promise，该 Promise 在所有输入 Promise 都解析或拒绝后解析。

以下代码演示了 Promise.all() 的用法：

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise 1 resolved');
  }, 1000);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise 2 resolved');
  }, 2000);
});

const promise3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise 3 resolved');
  }, 3000);
});

Promise.all([promise1, promise2, promise3])
  .then((values) => {
    console.log(values); // 输出：['Promise 1 resolved', 'Promise 2 resolved', 'Promise 3 resolved']
  })
  .catch((error) => {
    console.error(error);
  });

2. Promise.race()：胜者为王，败者淘汰

Promise.race() 方法也是用于同时执行多个 Promise，但它的工作方式与 Promise.all() 不同。Promise.race() 会返回一个新的 Promise，该 Promise 在第一个输入 Promise 解析或拒绝后立即解析或拒绝，而不管其他 Promise 的状态。

代码示例：

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise 1 resolved');
  }, 1000);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise 2 resolved');
  }, 2000);
});

const promise3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('Promise 3 rejected');
  }, 3000);
});

Promise.race([promise1, promise2, promise3])
  .then((value) => {
    console.log(value); // 输出：'Promise 1 resolved'
  })
  .catch((error) => {
    console.error(error); // 输出：'Promise 3 rejected'
  });

3. Promise.resolve() 和 Promise.reject()：打造 Promise 的垫脚石

Promise.resolve() 方法可将任何值包装成一个已解析的 Promise。而 Promise.reject() 方法可将任何错误包装成一个已拒绝的 Promise。

示例：

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

promise.then((value) => {
  console.log(value); // 输出：'Hello, world!'
});

const promise = Promise.reject(new Error('Something went wrong!'));

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

结论

通过掌握 Promise.all(), Promise.race(), Promise.resolve() 和 Promise.reject()，您可以提升 JavaScript 异步编程的技能。这些方法为编写可管理且高效的异步代码提供了强大的工具。

常见问题解答

1. Promise.all() 和 Promise.race() 有什么区别？
   • Promise.all() 等待所有输入 Promise 执行完毕，而 Promise.race() 在第一个输入 Promise 执行完毕后立即执行。
2. 为什么使用 Promise.resolve() 和 Promise.reject()？
   • 它们提供了一种将值和错误包装成 Promise 的便捷方法，从而简化异步代码的处理。
3. 如何在错误处理中使用 Promise？
   • 使用 Promise.catch() 方法来捕获 Promise 中发生的错误。
4. Promise 异步操作的原理是什么？
   • Promise 利用 JavaScript 的事件循环来执行异步操作，允许代码在等待 Promise 解析或拒绝时继续执行。
5. 何时应该使用 Promise？
   • 当您需要处理异步操作（如网络请求或数据库查询）时，应使用 Promise。