现今的 Web 应用已经成为了多数人每天必须使用的工具。而随着 Web 应用对于用户体验的要求不断提高，前端技术以惊人的速度发展着。其中，异步操作已经成为了现代 Web 应用开发不可或缺的一部分。而 ES2018 中的异步 await 和 async 又是如何实现的呢？本文将详细介绍这两个特性的实现方式，并提供代码示例和学习指导。
什么是异步 await 和 async？
异步操作是指在执行某个操作时，不需要等待该操作完成就可以继续执行下面的代码。在现代 Web 应用中，异步操作已经广泛应用于网络请求、文件读写、动画等多个方面。而异步操作常常难以处理回调嵌套、异常处理以及程序可读性的问题。异步 await 和 async 则是为了解决这些问题而出现的。
async 函数是异步操作的一个统一入口。async 函数返回一个 Promise 对象，async 函数可以在内部使用 await 关键字等待异步操作的完成，并返回一个异步操作完成后的值。异步操作出现异常时，async 函数会自动将异常转换成一个 rejected 的 Promise 对象，以方便进行后续处理。
下面是一个示例代码：
async function getData() { const result = await fetch('https://example.com/data.json'); const data = await result.json(); return data; } getData().then(data => console.log(data)).catch(error => console.error(error));
在上述代码中，getData 是一个 async 函数，使用 fetch 方法进行 http 请求，使用 await 关键字等待网络请求完成，并使用 JSON.parse 方法将数据解析成 JavaScript 对象后返回。无论该请求成功还是失败，调用 getData 方法的位置都可以通过 then 和 catch 方法获取该异步操作的结果或者错误信息。
异步 await 的实现方式
异步 await 的实现方式基于 Promise 的基础上，理解 Promise 的实现方式可以加深对于异步 await 的理解。
在 JavaScript 中，异步操作的执行首先会被转换成一个 Promise 对象，然后通过 Promise 对象进行回调处理。下面是一个 Promise 实现 Promise 进行异步操作的示例代码：
-- -------------------- ---- ------- --- ----------------- ------- -- - ------------- -- - ----- ------ - -------------- -- ------- - ---- - ---------------- - ---- - ---------- ------------ ------------ - -- ------ -- ------------ -- -------------------- ------------ -- ----------------------展开代码
在上述代码中，new Promise 创建了一个 Promise 对象，该 Promise 对象中的异步操作是一个延迟 1 秒的随机数生成。如果生成大于 0.5 的随机数，则 promise 的状态变成 resolved，通过 then 回调函数进行处理；否则状态变成 rejected，通过 catch 回调函数进行处理。
在 async 函数内部，可以通过 await 关键字等待一个返回 Promise 对象的异步操作完成，并获取该异步操作的返回值。下面是一个带有异步操作的 async 函数的示例代码：
-- -------------------- ---- ------- ----- -------- --------- - ----- ------ - ----- --- ----------------- -- - ------------- -- - ----- ---- - -------------- -------------- -- ------ --- ------ ------- - --------------------- -- ---------------------展开代码
在上述代码中，getData 函数通过 await 关键字等待一个返回 Promise 对象的异步操作完成后，再通过 return 返回异步操作的结果。调用 getData 的位置也可以通过 then 回调函数获取异步操作的结果。
异常处理
与常规的异步操作不同，使用 async 和 await 进行异步操作后，处理异常的方式有了明显的改善：
-- -------------------- ---- ------- ----- -------- --------- - --- - ----- ------ - ----- --------------------------------------- ----- ---- - ----- -------------- ------ ----- - ----- ------- - --------------------- ----- --- ------------ -------- ---- -------- ------- -- ---------- - - ------------------- -- ------------------------------ -- ----------------------展开代码
在上述代码中，使用 try/catch 进行异常处理。如果在异步操作中发生了遗产，会捕获到异常信息，并在 catch 块中进行处理。需要注意的是，catch 块中必须要进行异常的处理，否则异常会被“吞掉”而不会抛出。
综述
异步 await 和 async 是 ES2018 中的一种异步操作方式。async 函数是异步操作的一个统一入口，async 函数返回一个 Promise 对象。await 关键字可以等待一个返回 Promise 对象的异步操作完成，并获取该异步操作的返回值。使用 async 和 await 进行异步操作后可以方便的进行异常处理，并提高程序代码的可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bb0702306f20b3a6a4cc3c
