JS 异步发展流程：从 Callback 到 Promise，再到 Async/Await

2024-01-10 02:35:34







## 从 Callback 到 Promise

在 JavaScript 早期，异步编程主要依靠 Callback 函数来实现。Callback 函数是一种在某个事件发生后被调用的函数。例如，在下面的代码中，当按钮被点击时，一个 Callback 函数就会被调用：

```javascript
document.getElementById("button").addEventListener("click", function() {
  // Callback function
});

Callback 函数虽然简单易用，但是它也有很多缺点。首先，Callback 函数容易导致代码嵌套，使得代码难以阅读和维护。其次，Callback 函数难以处理错误。如果一个 Callback 函数抛出一个错误，那么它将无法被捕获，从而导致程序崩溃。

为了解决这些问题，JavaScript 引入了 Promise 对象。Promise 对象是一个表示异步操作的最终完成或失败的容器。Promise 对象有三种状态：

待定（Pending）：异步操作尚未完成。
已完成（Fulfilled）：异步操作已成功完成。
已拒绝（Rejected）：异步操作已失败。

Promise 对象提供了 then() 方法，该方法可以用来指定在 Promise 对象状态发生变化时要执行的函数。例如，在下面的代码中，我们使用 then() 方法来指定当 Promise 对象状态变为已完成时要执行的函数：

const promise = new Promise((resolve, reject) => {
  // Asynchronous operation
});

promise.then(function(result) {
  // Success handler
}, function(error) {
  // Error handler
});

Promise 对象相较于 Callback 函数具有许多优点。首先，Promise 对象可以使代码更加容易阅读和维护。其次，Promise 对象可以更好地处理错误。如果一个 Promise 对象被拒绝，那么我们可以使用 then() 方法的 error handler 来捕获错误。

从 Promise 到 Async/Await

Async/Await 是 JavaScript 中一种新的异步编程语法，它可以使异步编程更加简单和容易。Async/Await 允许我们使用同步的方式来编写异步代码。例如，在下面的代码中，我们使用 Async/Await 来编写一个异步函数：

async function myFunction() {
  // Asynchronous operation
}

当我们调用 myFunction() 函数时，JavaScript 引擎会自动创建一个 Promise 对象。如果异步操作成功完成，那么 Promise 对象就会变为已完成状态，并且 myFunction() 函数将返回异步操作的结果。如果异步操作失败，那么 Promise 对象就会变为已拒绝状态，并且 myFunction() 函数将抛出一个错误。

Async/Await 语法相较于 Promise 对象具有许多优点。首先，Async/Await 语法更加简单和容易理解。其次，Async/Await 语法可以使代码更加容易阅读和维护。第三，Async/Await 语法可以更好地处理错误。