从回调到 async/await， JavaScript 异步编程

从回调到 async/await

在 JavaScript 中，异步编程意味着处理在将来某个时刻完成的操作。这与同步编程不同，同步编程中的操作会立即完成，而异步编程中的操作则需要等待一段时间才能完成。

在早期，JavaScript 中处理异步操作的常用方式是回调函数。回调函数是一种在异步操作完成后被调用的函数。例如，以下代码使用回调函数处理异步的 setTimeout() 函数：

setTimeout(function() {
  // 这个函数将在 1 秒后被调用
}, 1000);

回调函数的优点是简单易用，但随着代码变得越来越复杂，回调函数的数量也会越来越多，这可能会导致代码难以阅读和维护。

为了解决回调函数的缺点，JavaScript 引入了 Promise。Promise 是一种表示异步操作及其最终结果的对象。Promise 有三种状态：等待中、已完成和已拒绝。当异步操作完成时，Promise 会从等待中状态变为已完成或已拒绝状态，并调用相应的回调函数。

以下代码使用 Promise 处理异步的 setTimeout() 函数：

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('成功');
  }, 1000);
});

promise.then(result => {
  // 这个函数将在 1 秒后被调用，并传入 '成功' 作为参数
}).catch(error => {
  // 这个函数将在 1 秒后被调用，并传入错误作为参数
});

Promise 的优点是使异步编程更加清晰和可读。但是，Promise 仍然需要编写回调函数，这可能会导致代码难以阅读和维护。

为了进一步简化异步编程，JavaScript 引入了 async/await。async/await 是 ES2017 推出的新特性，它允许开发者使用同步的写法来处理异步操作。

以下代码使用 async/await 处理异步的 setTimeout() 函数：

async function asyncFunction() {
  const result = await setTimeout(() => {
    return '成功';
  }, 1000);

  console.log(result);
}

asyncFunction();

async/await 的优点是使异步编程更加简洁和易读。开发者可以使用同步的写法来处理异步操作，而不用担心回调函数和 Promise 的复杂性。

总结

JavaScript 中的异步编程经历了从回调函数到 Promise，再到 async/await 的演变过程。每一种新的方式都比前一种更加简洁和易用。

对于初学者，建议先从回调函数开始学习，然后再学习 Promise 和 async/await。对于有经验的开发者，建议使用 async/await 来处理异步操作。