在 JavaScript 开发过程中，我们可能会遇到一些异步执行的问题，例如 Ajax 请求、定时器、事件响应等等。这些异步操作不能像同步操作一样按照代码的顺序执行，而是在后台线程中执行，主线程继续执行后续代码。
常用的解决方案是使用回调函数或 Promise，但这些方法都有缺点。回调函数嵌套层次太深，难以维护；Promise 的链式调用也会很复杂。ES8 中引入的 async/await 是一种新的解决异步操作的方案，其能够简化异步代码的编写。
async/await 概述
async/await 是基于 Promise 的语法糖，它可以将异步函数的执行顺序变得清晰易懂。async/await 结合使用，可以将异步调用的代码像同步代码一样书写，使得代码可读性更高，更易于维护。
async/await 的特点：
- async 表示定义一个异步函数，可以使用 await 等待异步操作的结果；
- 可以在 async 函数中使用 await 等待一个 Promise 对象，await 表示等待异步操作完成；
- await 后面的操作完成之后，async 函数的执行将被恢复，并返回操作得到的结果；
- 所有的 async 函数都返回一个 Promise 对象，该对象包含执行结果。
示例代码
下面是一段使用 async/await 解决异步执行顺序问题的示例代码：
----- -------- ----------- - ----- -------- - ----- ---------------- ----- ----- - ----- ---------------- ------------------- - ------------
这段代码中，loadPosts 函数是一个异步函数，它使用了 await 关键字等待 fetch 返回的 Promise 对象。
fetch 函数是浏览器提供的原生函数，它可以发起 HTTP 请求，返回一个 Promise 对象。在这里，我们使用 fetch 发送一个 HTTP GET 请求，获取服务器上的文章列表。fetch 返回的 Promise 对象可以使用 await 等待，等待操作完成之后，将得到一个 response 对象。
response 对象是一个包含了 HTTP 响应信息的对象，可以调用它的 json 方法解析成 JavaScript 对象。因为 json 方法也是一个返回 Promise 对象的异步操作，所以我们又可以继续使用 await 关键字等待它的执行。json 方法返回的结果就是我们要得到的文章列表。如果一切正常，我们就可以使用 console.log 打印出这个列表信息了。
async/await 的注意事项
在使用 async/await 时，需要注意以下几点：
- await 只能在 async 函数中使用；
- await 后面必须是一个 Promise 对象，否则会抛出 SyntaxError 异常；
- 因为 async 函数都返回一个 Promise 对象，所以可以使用 then/catch 方法来处理返回值或异常；
- 在同一 async 函数中，await 后面的操作是顺序执行的，不需要使用回调函数。
总结
ES8 中的 async/await 为解决 JavaScript 执行顺序问题提供了一种全新的方案。它在 Promise 基础上，提供了更加清晰易懂的语法，使得异步调用的代码像同步代码一样方便，可读性更高。
在使用 async/await 时，需要注意 await 只能在 async 函数中使用，必须等待 Promise 对象的结果。同时也需要注意异常的处理和返回值的处理方法。通过合理使用 async/await，我们可以使得异步操作的代码更加简洁明了，提高代码质量，降低维护成本。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/646db200968c7c53b0c555b8