从 Callbacks 到 Async/Await：JavaScript 异步编程的演进之路

2024-01-12 10:14:43

JavaScript 异步编程的演进：从 Callbacks 到 Async/Await

在瞬息万变的网络世界中，即时响应已成为应用程序和网站的刚需，而异步编程则为实现这一目标铺平了道路。 JavaScript 作为一门单线程且非阻塞的语言，天然契合了异步编程的需求，为我们提供了探索和优化的空间。

Callbacks：异步编程的奠基石

Callbacks 是 JavaScript 最早期的异步编程模式，它的工作原理很简单：当一个函数执行完成后，它会执行另一个函数。这种模式简单易懂，但在处理复杂异步操作时，容易导致代码混乱和难以维护。

function getData(callback) {
  setTimeout(() => {
    const data = { name: 'John Doe', age: 30 };
    callback(data);
  }, 1000);
}

getData((data) => {
  console.log(data);
});

Promises：结构化异步编程

Promises 作为 JavaScript 引入的异步编程模式，它提供了一种更结构化和易于管理的方式来处理异步操作。Promise 对象代表一个异步操作的最终完成或失败的结果。

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

getData()
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error(error);
  });

Async/Await：同步的异步编程

Async/Await 是 JavaScript ES8 引入的异步编程模式，它允许我们使用同步的语法来编写异步代码。Async/Await 利用了 Promises 的概念，但简化了代码结构，让代码更具可读性。

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

  return data;
}

getData()
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error(error);
  });