揭秘 JavaScript Promise 静态函数与错误处理之道：掌控异步世界

2024-01-11 01:28:04

在 JavaScript 的异步编程领域，Promise 扮演着举足轻重的角色，它为我们提供了优雅的方式来处理异步操作。Promise 不仅拥有强大的功能，还配备了一系列静态函数和错误处理机制，帮助我们轻松驾驭异步编程的复杂性。现在，就让我们一起揭开 Promise 静态函数与错误处理的奥秘，在 JavaScript 异步编程的世界中尽情驰骋。

一、Promise 静态函数揭秘

Promise 提供了几个静态函数，这些函数帮助我们创建和操作 Promise 对象。

1. Promise.resolve(value)：

这个函数将一个值包装成一个已完成状态的 Promise 对象。

const promise = Promise.resolve(42);
promise.then((value) => {
  console.log(value); // 输出: 42
});

2. Promise.reject(reason)：

这个函数将一个值包装成一个被拒绝状态的 Promise 对象。

const promise = Promise.reject("Error occurred");
promise.catch((reason) => {
  console.log(reason); // 输出: "Error occurred"
});

3. Promise.all(iterable)：

这个函数将一个 Promise 对象的可迭代对象包装成一个新的 Promise 对象。当所有传入的 Promise 对象都完成时，该新的 Promise 对象才会完成。

const promises = [
  Promise.resolve(1),
  Promise.resolve(2),
  Promise.resolve(3),
];

Promise.all(promises).then((values) => {
  console.log(values); // 输出: [1, 2, 3]
});

4. Promise.race(iterable)：

这个函数将一个 Promise 对象的可迭代对象包装成一个新的 Promise 对象。当传入的 Promise 对象中任何一个完成或拒绝时，该新的 Promise 对象都会完成或拒绝。

const promises = [
  Promise.resolve(1),
  Promise.reject("Error occurred"),
  Promise.resolve(3),
];

Promise.race(promises).then((value) => {
  console.log(value); // 输出: 1
}, (reason) => {
  console.log(reason); // 不会被调用
});

二、Promise 错误处理

Promise 错误处理同样至关重要，它确保我们在异步操作中能够捕获和处理错误。

1. Promise.catch(onRejected)：

这个方法用于捕获 Promise 对象被拒绝时的错误。

const promise = new Promise((resolve, reject) => {
  reject("Error occurred");
});

promise.catch((reason) => {
  console.log(reason); // 输出: "Error occurred"
});

2. Promise.finally(onFinally)：

这个方法无论 Promise 对象是完成还是拒绝，都会在最后执行。

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Success");
  }, 1000);
});

promise.finally(() => {
  console.log("Promise is completed"); // 输出: "Promise is completed"
});

三、实例演示：异步数据获取

让我们通过一个异步数据获取的例子来展示 Promise 的使用。

function fetchUserData(userId) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (userId === 1) {
        resolve({ name: "John Doe", email: "johndoe@example.com" });
      } else {
        reject("User not found");
      }
    }, 1000);
  });
}

fetchUserData(1)
  .then((user) => {
    console.log(user); // 输出: { name: "John Doe", email: "johndoe@example.com" }
  })
  .catch((reason) => {
    console.log(reason); // 不会被调用
  });

fetchUserData(2)
  .then((user) => {
    console.log(user); // 不会被调用
  })
  .catch((reason) => {
    console.log(reason); // 输出: "User not found"
  });