JavaScript Async / Await在10分钟内解释

在我开始对JavaScript中的 async/await 语法进行说明之前，先让我们花一点时间来了解一下我们已经走了多远，以及为什么这些对于编程语言的发展如此重要。

在最长的时间里，JavaScript开发人员不得不依赖回调来处理异步代码。结果，我们中的许多人都经历过回调地狱...

谢天谢地，然后（或者我们应该说 .then）来了Promises。他们为回调提供了一个更有组织的替代方案，并且大多数社区很快转而使用它们。现在，随着最新添加的Async和Await关键字，我们进入了一个新的JavaScript时代，即结构化且更易读的异步代码。

在开始之前，让我们先来熟悉一下这篇博文中将会使用的一些术语：

• 同步代码:同步代码是顺序执行的一行一行的代码。
• 异步代码:异步代码可以同时执行多行代码，且顺序可能不是依次顺序。
• 异步处理：在后台处理一项复杂的任务，主程序不需要等待，当复杂任务执行完毕时通知主程序。

在JavaScript的“Event loop”机制下，所有的任务都排队进入一个“task queue”。主线程不断的从这个队列里拿任务，并执行这些任务。当主线程遇到异步任务时，它会把这个异步任务丢进一个“Job queue”，让这个异步任务在这个队列里等待执行，主线程则继续执行下一个任务。当这个异步任务执行完毕之后，会被放进一个新的队列——“micro task queue”，等待主线程来执行。主线程执行完task queue里所有的同步任务后，就去查看是否有异步任务等待执行，如果有就从Job queue里取出任务并执行它，再接着执行micro task queue里等待执行的任务。

async function

async function 关键字用于定义一个异步函数。我们可以使用async 关键字在函数名前声明一个异步函数。

async function myFunction() {
  // 异步代码
}

当我们调用一个异步函数时，它不会立即执行，而是返回一个Promise对象。我们可以使用Promise对象的then()方法来指定当Promise对象被解析时要执行的代码。

myFunction().then((result) => {
  // 成功处理结果
});

myFunction().catch((error) => {
  // 处理错误
});

await 关键字

await 关键字用于等待一个异步函数执行完毕。我们可以使用await 关键字在一个异步函数中等待另一个异步函数执行完毕。

async function myFunction() {
  const result = await anotherFunction();
  // 使用结果
}

await 关键字只能在异步函数中使用。如果我们在一个同步函数中使用await 关键字，将会抛出一个错误。

总结

Async/Await是ES8中引入的语法，它让JavaScript开发者可以更轻松地编写异步代码。Async/Await语法使用起来非常简单，它可以帮助我们避免回调地狱，使我们的代码更加易读和易维护。

如果您还没有使用过Async/Await语法，我强烈建议您尝试一下。您会发现它可以让您的代码更加整洁和易读。

我希望这篇文章对您有所帮助。如果您有任何问题，请随时给我留言。