踏上异步编程之旅：揭秘async/await的神奇魅力

2024-02-15 15:22:07

在JavaScript的世界里，处理那些需要时间的操作，比如从服务器获取数据或者读取文件，一直是个棘手的问题。早些时候，我们依赖于回调函数，但这却容易导致代码变得混乱，难以阅读，就像掉进了一个“回调地狱”。

Promise的出现就像一道曙光，它提供了一种更优雅的方式来管理异步操作。Promise就像一个承诺，它保证会在将来某个时候给你一个结果，无论成功还是失败。你可以用.then()来处理成功的情况，用.catch()来处理失败的情况。这比层层嵌套的回调函数要清晰多了。

但是，Promise也不是完美的解决方案。当我们需要处理多个连续的异步操作时，Promise链会变得很长，代码依然不够简洁。

这时，async/await闪亮登场，它彻底改变了JavaScript异步编程的游戏规则。async/await建立在Promise的基础之上，但它让异步代码看起来就像同步代码一样，更容易理解和维护。

async/await的魔法：让异步代码像同步代码一样

async/await的核心理念是：它让你可以用同步的方式编写异步代码。当你在一个函数前面加上async，就表示这个函数是一个异步函数。在异步函数内部，你可以使用await关键字来等待一个Promise的结果，而不会阻塞程序的执行。

举个例子，假设我们要从服务器获取用户信息，传统的回调函数写法是这样的：

function getUserInfo(userId, callback) {
  // 模拟异步请求
  setTimeout(() => {
    const user = { id: userId, name: 'John Doe' };
    callback(null, user);
  }, 1000);
}

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

如果用Promise来写，会稍微好一点：

function getUserInfo(userId) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const user = { id: userId, name: 'John Doe' };
      resolve(user);
    }, 1000);
  });
}

getUserInfo(123)
  .then(user => {
    console.log(user);
  })
  .catch(err => {
    console.error(err);
  });

现在，让我们看看async/await是如何简化这一切的：

async function getUserInfo(userId) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const user = { id: userId, name: 'John Doe' };
      resolve(user);
    }, 1000);
  });
}

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

main();