随着 JavaScript 的发展，异步编程越来越受欢迎。ES6 中推出的 async/await 功能可以使异步编程更加易读和易用。本文将详细介绍 async/await 的使用方法，以及注意事项和最佳实践。
什么是 async/await
async/await 是一种异步编程的辅助工具，可以让 JavaScript 的异步操作看起来像同步操作。它使用 Promise 对象封装了异步操作和回调函数，并使用 await 关键字等待 Promise 对象的完成。当 Promise 对象 resolved 时，await 表达式的值将被返回，如果 Promise 对象 rejected，则将抛出错误。
async/await 的语法如下：
----- -------- ----------- - --- ------ - ----- -------- ------ ------- -
其中，async 表示该函数是异步的，会自动返回一个 Promise 对象；await 等待 Promise 对象的完成；promise 则是一个 Promise 对象。
示例代码
下面的例子演示了如何使用 async/await 获取用户的 GitHub 头像并显示在网页上：
----- -------- ----------------------- -
--- --- - -------------------------------------------
--- -------- - ----- -----------
--- ---- - ----- ----------------
--- --------- - ----------------
------ ----------
-
----- -------- ------------------------ -
--- -
--- --------- - ----- ------------------------
--- --- - ------------------------------
------- - ----------
-------------------------------
- ----- ------- -
---------------------
-
-
---------------------------- -- -- ----- ---- ---在这个例子中，getUserAvatar 函数获取指定用户的 GitHub 头像链接，showUserAvatar 函数在页面上显示该头像。由于 getUserAvatar 和 fetch 函数都是异步的，所以使用 await 表达式等待它们的完成。如果出现错误，使用 try/catch 捕获错误并打印到控制台。
注意事项
异步函数返回的是一个 Promise 对象。如果函数内部没有使用 await，将立即返回一个 resolved 的 Promise 对象。
async/await 只能在异步函数内部使用。如果在普通函数中使用 await，会抛出 SyntaxError 错误。
await 始终返回一个值。如果非 Promise 对象被使用了，它将被装箱成一个 resolved 的 Promise 对象。
可以使用多个 await 表达式等待多个 Promise 对象，它们将按顺序执行。如果某个 Promise 对象 rejected，则 async/await 将自动抛出一个错误，不需要额外的错误处理代码。
可以使用 try/catch 捕获 async/await 中的错误。
最佳实践
尽可能地将异步操作封装在一个独立的函数中，让代码更加可读和可复用。
不要在 async/await 中使用无意义的 try/catch 语句。只在必要的地方使用它们。
如果涉及多个异步操作，使用 Promise.all 或 Promise.race 等方法来处理。
如果可以，使用 async/await 替代 Promise 链。
结论
async/await 可以大大简化 JavaScript 中的异步编程。不仅可以让代码更加易读和易用，而且可以避免嵌套回调的问题。虽然 async/await 对于大多数情况都是最佳选择，但对于某些特殊的场景，还需要根据具体情况进行选择。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670cdff55f551281025be97d