20 分钟带你理解 JavaScript Promise 和 Async/Await

当你急需一个朋友帮忙时，你会希望他们立刻放下手头上的事情赶来帮助你，还是你更愿意让他们先把正在做的事情完成，之后再来帮助你呢？

在计算机的世界里，也有类似的情况。当程序需要执行一个耗时的任务时，比如从网络上获取数据，它可以使用两种方式来处理：

• 同步方式：程序会等待这个任务完成，然后再继续执行。
• 异步方式：程序会先执行其他任务，当耗时的任务完成后，它会再回到这个任务继续执行。

异步编程是 JavaScript 中处理耗时任务的一种常用方式。它可以防止程序在等待耗时任务完成时无响应，从而提高程序的性能和用户体验。

在 JavaScript 中，可以使用 Promise 和 Async/Await 来实现异步编程。

Promise

Promise 是一个对象，它代表一个即将完成或已经完成的异步操作。它有三种状态：

• pending：表示操作正在进行中。
• fulfilled：表示操作已经成功完成。
• rejected：表示操作已经失败。

Promise 可以通过 then() 方法来注册回调函数。当 Promise 的状态发生改变时，相应的回调函数就会被调用。

例如，以下代码展示了如何使用 Promise 来获取网络数据：

const promise = fetch('https://example.com/data');

promise.then((response) => {
  console.log(response);
});

在这个例子中，fetch() 函数返回一个 Promise 对象，表示从指定 URL 获取数据的操作。当这个操作完成后，then() 方法中的回调函数就会被调用，并把响应数据作为参数传递给回调函数。

Async/Await

Async/Await 是 ES8 中引入的语法，它可以让你更方便地编写异步代码。

要使用 Async/Await，首先需要在函数前面加上 async 。然后，可以使用 await 关键字来等待 Promise 的结果。

例如，以下代码展示了如何使用 Async/Await 来获取网络数据：

async function getData() {
  const response = await fetch('https://example.com/data');
  console.log(response);
}

getData();

在这个例子中，getData() 函数是一个异步函数，它使用 await 关键字来等待 fetch() 函数返回的 Promise。当 fetch() 函数完成时，await 关键字会把响应数据作为参数传递给 getData() 函数。

Async/Await 使得异步编程更加容易，它可以让你的代码看起来更像同步代码。

结语

Promise 和 Async/Await 是 JavaScript 中处理异步操作的两种常用方式。它们可以让你编写更健壮、更易于维护的代码。

如果你想了解更多关于 JavaScript 异步编程的内容，我推荐你阅读以下资源：

• 阮一峰的 Promise 入门教程
• Mozilla 开发者网络的 Async/Await 教程

希望这篇文章对你有帮助！