在 ES8 中，Async / Await 成为了 JavaScript 异步编程的一个重要工具，解决了异步回调地狱的问题，使得异步编程更加简单、优雅。本文将深入探讨 Async / Await 的原理、用法以及在实际项目中的应用。
什么是 Async / Await
Async / Await 是一个用于解决异步编程的新功能，它基于 Promise 实现，可用于异步执行操作并获得结果，同时还能避免异步回调地狱的情况。
- Async: 表示这是一个异步函数，函数体内必须包含 await 表达式。
- Await: 表示等待异步操作完成并返回结果，只能在异步函数内部使用。
Async / Await 的优点
Async / Await 有以下优点：
- 可读性更强：Async / Await 可以把异步的代码写成同步风格，可以让代码更加易读易懂，堆叠嵌套的回调也会变得更加简单明了。
- 错误处理更加方便：Async / Await 中可以使用 try / catch 来捕获错误，避免了使用回调函数进行错误处理的繁琐过程。
- Promise 优化：Async / Await 可以非常方便地调用 Promise 对象，甚至还可以组合使用 Promise。
- 可以在循环中使用：使用 Async / Await 可以在循环中轻松使用异步请求，而不需要担心处理回调函数的顺序。
如何使用 Async / Await
下面是一个例子，使用 Async / Await 实现异步加载图片的例子：
-- -------------------- ---- ------- ----- -------- -------------- - ----- -------- - ----- ----------- ----- ---- - ----- ---------------- ----- -------- - -------------------------- ----- ----- - --- -------- --------- - --------- --------------------------------- -- -------------------------------------------
在这个例子中，我们定义了一个异步函数 loadImage，通过 await fetch(url) 可以等待获取给定 URL 的响应，并通过 await response.blob() 等待响应的 Body 被转化成一个 Blob，最后通过 URL.createObjectURL(blob) 创建一个 Blob URL。创建完 url 还要创建图片元素并插入 dom 操作中。
Async / Await 的错误处理
除了优化代码的可读性外，Async / Await 也提供了更容易的错误处理。由于 Async / Await 基于 Promise 来工作，它也可以像 Promise 一样使用 try / catch 来处理错误。下面是一个例子：
-- -------------------- ---- -------
----- -------- ----------- -
--- -
----- -------- - ----- ------------------------------------------------------
----- ---- - ----- ----------------
------------------
- ----- ------- -
---------------------
-
-
------------在这个例子中，我们使用 try / catch 来捕获可能抛出的错误，而不是使用 Promise 的 .then() 或 .catch() 进行处理。
Async / Await 中的组合使用
Async / Await 还提供了一些其他有用的功能，如组合多个异步操作。下面是个组合使用的例子：
-- -------------------- ---- -------
----- -------- ---------- -
----- -------------- ------------- - ----- -------------
------------------------------------------------------
-----------------------------------------------------
---
----- ---- - ----- --------------------
----- ---- - ----- --------------------
----------------- ------
-
-----------在这个例子中，我们使用了 Promise.all 方法来并行请求两个 API，使用数组解构来分别获取两个不同的响应。接着，我们再次使用 await 等待两个不同的 JSON 数据完成，最后将数据输出到控制台。
总结
ES8 中引入的 Async / Await 工具是又一重大改进，它使用了 Promise API，并允许我们编写和阅读使用异步操作的代码。
以上就是 Async / Await 的简要介绍，它简化了异步回调的代码，提高了代码的可读性，同时也优化了错误处理流程。现如今，Async /Await 已经在许多前端项目中大量应用，并为全栈工程师的开发带来了无穷的便利。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a5daf9add4f0e0ffe6a37c