领悟JS异步：历史回顾及3种解决方式

2024-02-22 07:11:03

在JavaScript的世界里，异步操作就像生活中的快递，你下单了，但并不知道它什么时候会送到。为了更好地管理这些“快递”，JavaScript 提供了多种处理异步操作的工具，就像不同的快递公司一样，它们各有特色，也各有优缺点。

最早出现的“快递公司”是回调函数 。它就像传统的邮政服务，你留一个地址，快递到了就通知你。回调函数简单直接，但如果你的“快递”很多，就会收到一堆通知，容易搞混。特别是当一个“快递”依赖于另一个“快递”的时候，比如你需要先收到 A 快递才能下单 B 快递，代码就会像俄罗斯套娃一样，一层套一层，让人眼花缭乱。

为了解决回调函数的混乱问题，ES6 推出了 Promise ，就像现代化的物流公司，它给你一个快递单号，你可以随时查询快递的状态。Promise 有三种状态：pending（运输中）、fulfilled（已送达）和rejected（派送失败）。你可以用 .then() 方法来处理“快递送达”的情况，用 .catch() 方法来处理“派送失败”的情况。Promise 的出现让异步操作的管理变得更加有序，代码也更加清晰。

除了 Promise，JavaScript 还提供了 生成器函数 和 async 函数 两种处理异步操作的方式。生成器函数就像可以暂停的“快递机器人”，它可以一步一步地执行，遇到需要等待的情况就暂停，等“快递”到了再继续执行。async 函数则更像是“无人机快递”，它可以自动处理等待的过程，让异步操作看起来像同步操作一样。

那么，面对这么多选择，我们该如何选择呢？一般来说，如果你的异步操作比较简单，回调函数也能胜任。但如果你的异步操作比较复杂，或者需要处理多个异步操作之间的依赖关系，那么 Promise.then 或 async 函数会是更好的选择。它们可以让你的代码更清晰、更易于维护。

举个例子 ，假设你需要从服务器获取用户信息，然后根据用户信息获取用户的订单列表。使用 Promise.then，你可以这样写：

function getUserInfo(userId) {
  return new Promise((resolve, reject) => {
    // 模拟异步获取用户信息
    setTimeout(() => {
      const userInfo = { id: userId, name: 'John Doe' };
      resolve(userInfo);
    }, 1000);
  });
}

function getOrderList(userId) {
  return new Promise((resolve, reject) => {
    // 模拟异步获取订单列表
    setTimeout(() => {
      const orderList = [{ id: 1, amount: 100 }, { id: 2, amount: 200 }];
      resolve(orderList);
    }, 1000);
  });
}

getUserInfo(123)
  .then((userInfo) => {
    console.log('用户信息：', userInfo);
    return getOrderList(userInfo.id);
  })
  .then((orderList) => {
    console.log('订单列表：', orderList);
  })
  .catch((error) => {
    console.error('发生错误：', error);
  });

这段代码清晰地展示了异步操作的流程：先获取用户信息，然后根据用户信息获取订单列表。如果任何一个步骤发生错误，都会被 .catch() 方法捕获。

再举个例子 ，使用 async 函数，你可以这样写：

async function getUserAndOrderList(userId) {
  try {
    const userInfo = await getUserInfo(userId);
    console.log('用户信息：', userInfo);
    const orderList = await getOrderList(userInfo.id);
    console.log('订单列表：', orderList);
  } catch (error) {
    console.error('发生错误：', error);
  }
}

getUserAndOrderList(123);