在 JavaScript 中使用异步编程，也就是非阻塞式编程，已经成为一种标配。因为 JavaScript 是单线程运行的语言，如果你在UI线程中执行一个长时间的阻塞操作，那么页面就不会有响应。在 JavaScript 中异步编程，有多种方法可供选择，其中 Promise 已经成为默认的解决方法。ES8 中又新增了一个语法糖：async/await。 async/await 代码更加清晰且易于理解。 本文将详细讲解如何在 JavaScript 中使用 ES6 的 async/await 关键字。
为什么需要异步编程？
JavaScript 是单线程执行的语言，如果在执行时间较长的操作时，整个调用栈就会停止，直到操作完成才会进行下一步。这意味着，在执行完这些操作之前，JavaScript 代码中后面的逻辑都无法执行。如果我们要在网页上展示某项内容，但这项内容的获取或计算需要耗费一定的时间，如果不使用异步编程，页面将无法响应，用户的浏览体验将变得极差。
异步编程是解决此类问题的方法。在 JavaScript 中，常用的异步编程方法有 Promise、回调函数和事件。 ES2017 中新增了 async/await 语法，它可以极大地简化异步编程。
async/await 简介
它是异步编程中的新方法，也是 Promise 的语法糖。在 ES6 中，Promise 已经成为了解决异步编程最推荐的方法。但是在实际的开发中，Promise 也存在一些问题，比如无法在程序中进行错误处理，以及需要一定的编程能力才能实现链式函数调用。 async/await 就是为了解决这些问题而出现的。
在使用 async/await 的时候，仍然需要使用 Promise 进行封装。async 函数会在其内部隐式使用 Promise 将返回值包装成一个新的 Promise 对象。
使用 async/await 的优点：
- 可读性高，代码清晰
- 错误处理更加方便
- 更加适合处理异步流程
async/await 的使用
在函数声明处添加 async 修饰符，因为 async 修饰的函数会返回一个 Promise 对象，在 async 函数中使用 await 可以等待其他异步操作的结果，这使得异步代码的执行过程像同步的代码一样简单。
一个简单的 async/await 函数
async function fetchData() {
const response = await fetch('https://example.com/some/api');
const data = await response.json();
return data;
}在这个例子中，我们使用 fetch() 函数请求数据，并在响应后将数据转换为 JSON（假设其返回一个包含数据的对象）。 这个函数会返回一个 Promise，在数据获取成功后会将数据返回给调用 fetchData() 的地方。
除此之外，async/await 还支持错误处理。可以使用 try-catch 语句来处理任何错误。
-- -------------------- ---- -------
----- -------- ----------- -
--- -
----- -------- - ----- --------------------------------------
----- ---- - ----- ----------------
------ -----
- ----- ------- -
------------------- -----------
----- ------
-
-在这个例子中，我们使用 try-catch 来处理异步操作中的错误，并将错误打印出来。如果发生错误，函数就会将其抛出到 Promise 以供后续处理。
async/await 与 Promise
async/await 是 Promise 的语法糖。如果我们使用 Promise，上面的示例代码看起来会是这样子：
-- -------------------- ---- -------
-------- ----------- -
------ -------------------------------------
-------------- -- ----------------
------------ -- -
------ -----
--
-------------- -- -
------------------- -----------
------ ------
---
-在这个例子中，我们使用了 Promise 对象的链式调用，将请求和响应封装成一个 Promise，并返回处理的数据或错误信息。
但是使用 async/await，我们可以将这个过程更加简化。「async/await」 是语法糖，并不会替换 Promise，实际上，在执行 async 函数时， JavaScript 引擎会将其转换为 Promise 对象。
总结
async/await 是 ES6 中一个非常方便的语法糖，简化了异步编程的写法，并且增加了代码的可读性。async/await 代码更加清晰易懂，避免了 Promise 的链式函数调用，也方便了错误的处理。当然，如果你想了解更多 Promise 的内容，也可以去查阅 Promise 的文档。
-- -------------------- ---- -------
----- -------- ----------- -
--- -
----- -------- - ----- --------------------------------------
----- ---- - ----- ----------------
------ -----
- ----- ------- -
------------------- -----------
----- ------
-
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64573e00968c7c53b0a06a59