如何正确使用 ES6 中的 async/await 功能

阅读时长 4 分钟读完

随着 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 捕获错误并打印到控制台。

注意事项

  1. 异步函数返回的是一个 Promise 对象。如果函数内部没有使用 await,将立即返回一个 resolved 的 Promise 对象。

  2. async/await 只能在异步函数内部使用。如果在普通函数中使用 await,会抛出 SyntaxError 错误。

  3. await 始终返回一个值。如果非 Promise 对象被使用了,它将被装箱成一个 resolved 的 Promise 对象。

  4. 可以使用多个 await 表达式等待多个 Promise 对象,它们将按顺序执行。如果某个 Promise 对象 rejected,则 async/await 将自动抛出一个错误,不需要额外的错误处理代码。

  5. 可以使用 try/catch 捕获 async/await 中的错误。

最佳实践

  1. 尽可能地将异步操作封装在一个独立的函数中,让代码更加可读和可复用。

  2. 不要在 async/await 中使用无意义的 try/catch 语句。只在必要的地方使用它们。

  3. 如果涉及多个异步操作,使用 Promise.all 或 Promise.race 等方法来处理。

  4. 如果可以,使用 async/await 替代 Promise 链。

结论

async/await 可以大大简化 JavaScript 中的异步编程。不仅可以让代码更加易读和易用,而且可以避免嵌套回调的问题。虽然 async/await 对于大多数情况都是最佳选择,但对于某些特殊的场景,还需要根据具体情况进行选择。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/670cdff55f551281025be97d

纠错
反馈