在过去，开发人员常常需要使用回调函数、promise 等方式处理异步代码。虽然这些方式都能处理异步代码，但是它们也存在一些问题，例如回调深度太大，过长的 promise 链等等。为了解决这些问题，ES7 新增加了一个处理异步代码的特性——async/await。
什么是 async/await？
async/await 是一种异步处理方式，它由 ES7（ES2017）引入。可以认为 async/await 是 promise 的一种语法糖，因为 async/await 隐藏了 promise 的实现细节，并使用类似于同步代码的方式处理异步代码。
async/await 可以让我们以同步代码的方式编写异步代码，从而减少回调函数的嵌套，提高代码的可读性和可维护性。
实例
让我们看一下 async/await 在实际中的应用。假设我们需要从一个远程 API 中获取数据，并将数据渲染到网页中。首先，我们需要定义一个函数来获取数据：
----- -------- ----------- - ----- -------- - ----- -------------------------------------- ----- ---- - ----- ---------------- ------ ----- -
这里的 fetchData 函数是一个 async 函数，它使用了 await 语法来等待 fetch 和 response.json 方法的执行结果，并将数据保存到 data 变量中，最后 return 数据。
然后，我们可以在渲染函数中使用 fetchData 函数来获取数据并进行渲染：
----- -------- ------------ - ----- ---- - ----- ------------ -- ----- --- - -
这里的 renderData 函数也是一个 async 函数，它调用 fetchData 函数并使用 await 等待 fetchData 函数返回的数据。然后它使用获取到的数据在 DOM 中渲染页面。
async 函数
定义一个 async 函数非常简单，直接在函数声明前面添加 async 关键字即可。一个 async 函数默认会返回一个 Promise 对象。
----- -------- ----- - ------ ------ ------- - ------------------ -- - ------------------- -- ------ ------ ---
上面的例子展示了如何定义一个返回字符串的 async 函数，并使用 then 方法访问函数的返回值。
await 表达式
await 表达式用来等待一个 Promise 对象或者其他值，如果是 Promise，则将其 resolve 的值作为表达式的结果返回。如果是其他值，则会直接返回该值。
----- -------- ----- -
----- ------- - --- ----------------- ------- -- -
------------- -- -------------- -------- ------
---
----- ------ - ----- --------
--------------------
-
------ -- - ---- ------ ------上面的例子展示了如何使用 await 表达式等待一个 Promise 对象，并返回其 resolve 的结果。
注意，使用 await 表达式时，它必须在 async 函数内部使用。任何在 async 函数外部使用 await 都会抛出异常。
错误处理
async/await 也提供了一种基于 try/catch 的错误处理方式，这比使用 promise 上的 catch 方式更加直观。
----- -------- ----- -
--- -
----- -------- - ----- --------------------------------------
----- ---- - ----------------
------ -----
- ----- ------- -
---------------------
-
-上面的例子展示了如何使用 try/catch 处理 async 函数中的错误。当 fetch 或 response.json 方法出错时，会进入 catch 块中，并输出错误信息。
总结
async/await 是一种使用同步方式处理异步代码的语法糖，它隐藏了 promise 的实现细节，提高了代码的可读性和可维护性。async/await 使用 async 函数定义，使用 await 表达式等待异步方法的执行结果。async/await 使用 try/catch 处理错误，这比使用 promise 上的 catch 方式更加直观。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6455e415968c7c53b093f9fb