ES6的Promise：深探异步编程之道，畅享更轻松、更安全的代码旅程

前端

2023-10-19 22:18:20

初探Promise：异步编程的救星
异步编程是现代软件开发的基石，它允许程序在等待外部操作（如网络请求或文件读取）的结果时继续执行。传统上，我们使用回调函数来处理异步操作，这往往会导致代码冗长且难以维护。

Promise的出现改变了这一切。Promise是一种表示异步操作的最终完成或失败的对象。它提供了一个更结构化和可控的方式来处理异步操作，使代码更易于阅读和维护。

Promise的状态：从等待到完成

Promise始终处于以下三种状态之一：

Pending： 初始状态，表示异步操作尚未完成。
Fulfilled/Resolved： 表示异步操作成功完成。
Rejected： 表示异步操作失败。

Promise的状态只能通过执行函数来改变。该函数可以是您自己编写的，也可以是库或框架提供的。当异步操作完成时，该函数将被调用，并将Promise的状态设置为Fulfilled或Rejected。

消费Promise：then()和catch()

要消费Promise，可以使用then()和catch()方法。

then()： 当Promise状态变为Fulfilled时，then()方法将被调用。您可以使用then()方法来处理异步操作的结果。
catch()： 当Promise状态变为Rejected时，catch()方法将被调用。您可以使用catch()方法来处理异步操作失败的情况。

您可以在一个Promise上添加多个then()和catch()方法。当Promise状态改变时，这些方法将按顺序执行。

async和await：让异步编程更简单

async和await是ES8中引入的两个，它们可以使异步编程更加简单和容易。

async： 将一个函数标记为异步函数。异步函数可以包含await表达式。
await： 等待一个Promise。await表达式只能在异步函数中使用。

使用async和await，您可以编写出更简洁、更易于阅读的异步代码。例如，以下代码使用回调函数来处理异步操作：

function fetchUserData(userId, callback) {
  setTimeout(() => {
    const user = {
      name: 'John Doe',
      email: 'johndoe@example.com'
    };

    callback(null, user);
  }, 1000);
}

fetchUserData(1, (err, user) => {
  if (err) {
    console.error(err);
  } else {
    console.log(user);
  }
});

使用async和await，可以将上述代码重写为以下形式：

async function fetchUserData(userId) {
  const user = await new Promise((resolve, reject) => {
    setTimeout(() => {
      const user = {
        name: 'John Doe',
        email: 'johndoe@example.com'
      };

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

  return user;
}

async function main() {
  try {
    const user = await fetchUserData(1);
    console.log(user);
  } catch (err) {
    console.error(err);
  }
}

main();