在编写前端代码时，经常会遇到需要执行异步操作的情况，例如发送网络请求、读取文件等等。在过去，我们通常会使用回调函数或 Promise 来处理异步代码，但这些方法都有一些缺点。回调函数嵌套过多会导致代码难以维护，而 Promise 的语法也比较复杂。ES8 中引入了 async 函数，它可以让异步代码变得更加易读易写。
什么是 async 函数
async 函数是一个返回 Promise 对象的函数。它比较特殊的地方在于，它内部可以使用 await 关键字来等待 Promise 对象的状态变化。当 async 函数执行到 await 语句时，它会暂停执行并等待 Promise 对象的状态变化。如果 Promise 对象变为 resolved 状态，await 语句会返回 Promise 对象的 resolved 值；如果 Promise 对象变为 rejected 状态，await 语句会抛出 Promise 对象的 rejected 值。当 Promise 对象的状态变化后，async 函数会恢复执行。
async 函数的语法如下：
async function foo() {
// ...
}async 函数的优点
使用 async 函数可以带来以下优点：
简化异步代码的编写。使用 async 函数可以避免回调函数嵌套的问题，也不需要手动处理 Promise 的状态变化。
更好的错误处理。在 async 函数内部使用 try-catch 语句可以方便地捕获 Promise 对象的 rejected 值。
可读性更高。async 函数的语法比 Promise 更加简洁，也更加易读。
async 函数的示例
下面是一个使用 async 函数发送网络请求的示例：
-- -------------------- ---- -------
----- -------- -------------- -
--- -
----- -------- - ----- -----------
----- ---- - ----- ----------------
------ -----
- ----- ------- -
---------------------
-
-
---------------------------------------------------------
---------- -- ------------------
------------ -- ----------------------在上面的示例中，我们定义了一个名为 fetchData 的 async 函数。它首先使用 fetch 函数发送网络请求，并使用 await 语句等待 Promise 对象的状态变化。如果 Promise 对象变为 resolved 状态，fetch 函数会返回一个 Response 对象；如果 Promise 对象变为 rejected 状态，fetch 函数会抛出一个错误。接着，我们再次使用 await 语句等待 Response 对象的状态变化，并使用 json 方法将 Response 对象转换为 JavaScript 对象。最后，我们使用 try-catch 语句捕获 Promise 对象的 rejected 值。
在 fetchData 函数的调用中，我们使用 then 方法处理 resolved 状态的 Promise 对象，使用 catch 方法处理 rejected 状态的 Promise 对象。
async 函数的注意事项
使用 async 函数也需要注意一些事项：
async 函数内部不能使用箭头函数。因为箭头函数没有自己的 this，它的 this 始终指向定义它时的上下文。
async 函数返回的是一个 Promise 对象。如果 async 函数内部没有使用 return 语句，它会默认返回一个 resolved 状态的 Promise 对象；如果 async 函数内部抛出了一个错误，它会返回一个 rejected 状态的 Promise 对象。
await 语句只能在 async 函数内部使用。在其他函数内部使用 await 语句会导致语法错误。
总结
async 函数是 ES8 中引入的一个新特性，它可以让异步代码变得更加易读易写。使用 async 函数可以避免回调函数嵌套的问题，也可以更好地处理 Promise 的状态变化。在编写异步代码时，我们可以考虑使用 async 函数来简化代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65d878671886fbafa4631524