异步请求进化论：从“回调地狱”到“Promise”到“Async/Await”

前端

2023-11-26 12:39:44

异步请求：在 JavaScript 中提高性能和用户体验

什么是异步请求？

在 JavaScript 中，异步请求允许我们在不阻塞主线程的情况下向服务器发送请求。这意味着我们的程序可以在等待服务器响应的同时继续执行其他任务。这大大提高了性能和用户体验，因为用户不必等待服务器响应才能继续与应用程序交互。

异步请求的演变

过去，JavaScript 中处理异步请求的常用方法是使用回调函数 。当异步操作完成后，回调函数将被调用。这种方法虽然简单易懂，但在处理多个嵌套异步请求时，代码结构很容易变得混乱。

为了解决回调函数的局限性，引入了Promise 。Promise 是一个表示异步操作最终完成或失败的 JavaScript 对象。它允许我们将异步操作的结果传递给后续操作，从而使代码结构更加清晰和可读。

最近，Async/Await 作为处理异步请求的最新语法糖が登場した。Async/Await 使得 JavaScript 代码看起来像是在同步执行，而实际上是在异步执行。这种方法进一步简化了代码结构，使其更易于阅读和维护。

比较不同异步请求处理方式

以下是一个示例，展示了使用回调函数、Promise 和 Async/Await 处理异步请求的优缺点：

// 回调函数
function getData(callback) {
  setTimeout(() => {
    callback({ name: 'John Doe' });
  }, 1000);
}

getData((data) => {
  console.log(data.name); // John Doe
});

// Promise
function getData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({ name: 'John Doe' });
    }, 1000);
  });
}

getData()
  .then((data) => {
    console.log(data.name); // John Doe
  })
  .catch((error) => {
    console.error(error);
  });

// Async/Await
async function getData() {
  const data = await new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({ name: 'John Doe' });
    }, 1000);
  });

  console.log(data.name); // John Doe
}

getData();