探索 JS 中 Promise、async 及 await 的特性与优缺点

2023-11-14 13:40:32

JavaScript 中的 Promise

Promise 是 JavaScript 中表示异步操作的占位符。它代表着该异步操作的最终完成或失败及其结果值。

Promise 有三种状态：

等待中（pending）：这是 Promise 的初始状态，表示异步操作尚未完成。
已完成（resolved）：当异步操作成功完成后，Promise 就会进入已完成状态。
已拒绝（rejected）：当异步操作失败时，Promise 就会进入已拒绝状态。

您可以使用 .then() 方法来监听 Promise 的状态变化。.then() 方法接受两个参数：一个用于处理已完成状态的回调函数，另一个用于处理已拒绝状态的回调函数。

例如，以下代码演示了如何使用 Promise 来获取用户的数据：

const getUserData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const user = {
        name: 'John Doe',
        age: 30
      };

      resolve(user);
    }, 1000);
  });
};

getUserData()
  .then((user) => {
    console.log(user);
  })
  .catch((error) => {
    console.error(error);
  });

JavaScript 中的 async 和 await

async 和 await 是 ES8 中引入的两个，它们可以帮助您编写更简洁和可读的异步代码。

async 函数是一个返回 Promise 的函数。您可以使用 await 关键字来等待 Promise 的完成，而不用使用 .then() 方法。

例如，以下代码演示了如何使用 async 和 await 来获取用户的数据：

async function getUserData() {
  const user = await new Promise((resolve, reject) => {
    setTimeout(() => {
      const user = {
        name: 'John Doe',
        age: 30
      };

      resolve(user);
    }, 1000);
  });

  return user;
}

getUserData()
  .then((user) => {
    console.log(user);
  })
  .catch((error) => {
    console.error(error);
  });