JavaScript中异步任务处理的艺术

2024-02-17 10:05:19

异步任务：JavaScript的并发之道

在JavaScript的世界里，代码通常是按照顺序一行一行执行的。但有些任务，比如从服务器获取数据或者读取文件，需要花费一定的时间。如果我们傻傻地等待这些任务完成，整个程序就会像被冻住一样，用户体验自然糟糕透顶。这就是为什么我们需要异步任务。

异步任务就像安排了一个助手在后台默默工作。你发出指令后，可以继续做其他事情，助手完成工作后会通知你。这样一来，程序就不会被阻塞，可以流畅地运行。

回调函数：异步任务的传统处理方式

很久以前，JavaScript主要依靠回调函数来处理异步任务。简单来说，就是把一个函数作为参数传递给另一个函数，当异步任务完成后，这个被传递的函数就会被执行。

举个例子，假设我们要从服务器获取用户信息：

function getUserInfo(userId, callback) {
  // 模拟从服务器获取用户信息
  setTimeout(() => {
    const userInfo = { id: userId, name: 'John Doe' };
    callback(userInfo);
  }, 1000);
}

getUserInfo(123, (userInfo) => {
  console.log(userInfo); // 输出用户信息
});

这段代码中，getUserInfo 函数模拟了从服务器获取用户信息的过程，并在 1 秒后调用 callback 函数，并将用户信息作为参数传递给它。

回调函数虽然简单易懂，但当异步任务嵌套多层时，就会出现所谓的“回调地狱”。代码会变得像蜘蛛网一样错综复杂，难以阅读和维护。

Promise：异步任务的进化

为了解决回调地狱问题，ES6 引入了 Promise。Promise 可以理解为一个异步操作的承诺，它有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。

使用 Promise，我们可以将异步操作的流程写得更清晰：

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

getUserInfo(123)
  .then((userInfo) => {
    console.log(userInfo); // 输出用户信息
  })
  .catch((error) => {
    console.error(error); // 处理错误
  });

这段代码中，getUserInfo 函数返回一个 Promise 对象。当异步操作成功时，调用 resolve 函数，并将结果传递出去；当异步操作失败时，调用 reject 函数，并将错误信息传递出去。

通过 then 方法，我们可以链式地处理异步操作的结果，代码结构更加清晰。catch 方法则用于捕获异步操作过程中发生的错误。

async/await：让异步代码更像同步代码

ES7 引入了 async/await 语法，它建立在 Promise 的基础上，可以让异步代码看起来更像同步代码。

async function fetchUserInfo(userId) {
  try {
    const userInfo = await getUserInfo(userId);
    console.log(userInfo); // 输出用户信息
  } catch (error) {
    console.error(error); // 处理错误
  }
}

fetchUserInfo(123);