作为一门广泛应用于前端开发的语言，JavaScript 的异步编程一直是开发者们极力解决的难题。ES6 中异步编程的解决方案，Promise 和 Generator，一定程度上缓解了这个问题。而在 ES8 中，Async 函数成为了异步编程的新解决方案，也让 JavaScript 变得更加强大。
Async 函数是什么？
Async 函数是一个异步函数，相对于 Generator 函数，它不需要在函数体内部使用 yield 命令来执行异步操作，直接在函数前加上 async 关键字即可声明一个异步函数。
-- -------------------- ---- -------
----- -------- ----- -
--- -
--- ------- - ----- -------------
--- ------- - ----- -------------
--- ------- - ----- -------------
------ --------
- ----- ------- -
-------------------
-
-一些需要注意的点：
- Async 函数在声明时返回一个 Promise 对象，可以使用 then 方法进行链式调用或者使用 await 来获取异步操作结果。
- Async 函数可以通过 await 命令来挂起它所包含的异步操作，直到异步操作完成后再继续执行。
- Async 函数使用 try-catch 语句来捕获异常，并且在 Promise 实例状态变为 reject 时返回的是 throw 语句所抛出的对象。
Async 函数的优势
- 简化异步操作代码
相比较于 Promise 和 Generator，在 Async 函数中开发者不必写那么多繁琐的逻辑实现异步编程，直接通过 await 命令等待异步操作结果即可，代码量大大减少。例如下面例子中，使用 Promise 实现的异步调用和使用 Async 实现异步调用的代码对比：
-- -------------------- ---- -------
-- -- ------- --
-------- ------------- -
------ --- ----------------- ------- -- -
-----------------------
--------- -- -----------
---------- -- -
-- ---------- --- -- -
-------------------
- ---- -
-----------------
-
---
---
-
-------------
---------- -- ------------------
------------ -- --------------------
-- -- ----- --
----- -------- ------------- -
--- -
--- --- - ----- ------------------------
--- ---- - ----- -----------
-- ---------- --- -- -
------ ----------
- ---- -
----- --- ----------------
-
- ----- ------- -
-------------------
-
-
--------------通过对比两个代码片段，可以发现 Async 函数代码量相对更少，逻辑更简单。
- 错误处理更加便捷
在异步编程中，错误处理总是伴随代码编写的方方面面。Promise 和 Generator 中代码错误处理相对较为清晰有序，但是 Async 函数进一步强化了这个特点。在 Async 函数中，我们可以直接使用 try-catch 语句来捕获异常，不必写繁琐的 reject 链式调用。这使得错误处理的代码逻辑更加简单，也更易于管理和理解。
- 支持更优雅的代码结构
使用 Async 函数实现的异步编程代码结构更优雅，代码整个结构更加清晰，也更易于维护。同时，Async 函数在实现异步操作过程中对其它函数的调用更加自然，可以遵循正常的同步操作方式来实现异步操作。这改变了以往在异步编程中，大量的回调嵌套和 Promise 链式调用过程中函数间传递值的方式，使用 Async 函数可以实现更优雅的代码结构。
Async 函数的使用场景
Async 函数作为一种异步编程的解决方案，可以在前端开发的众多场景中使用。以下是几个使用 Async 函数的场景：
- 异步数据获取
在拿到异步数据的前提下，进行其他的展示逻辑处理等，这种工作场景适合异步函数来代替回调函数。
-- -------------------- ---- ------- ----- -------- --------------------- - ----- --- - ----- ------------------------- ----- -------- - ----- ----------- ------ --------- - ----- -------- -------------------- - ----- -------- - ----- ---------------------- ------------------------- -
- 异步操作数据的处理
在数据处理的过程中通常需要一些耗时的操作，例如文件读取、网络请求等，Async 函数则可以很好地避免高嵌套的回调函数和 Promise 的连续调用。例如下面将一张图片上传到服务器的代码示例中：
-- -------------------- ---- -------
----- -------- ------------- -
--- -
----- ---- - ----------------
----- ---- - ----- ------------------- -- ---- ---
----- --------- - ----------------
----- ---- - ----- ----------------------------------- -- ------
----- ----- - -----------
----- -------- - --- -----------
----------------------- ------
------------------------ -------
----- ---- - ----- --------------------- ---------- -- ----
------ -----
- ----- ----- -
-----------------
-
-
-------- --------------- -
-- ------
----- ---- - ----------------------------------------------------
------ -----
-- 操作多个异步函数完成任务
Async 函数经常用于操作多个异步函数完成一个大任务，并且他们的执行顺序与返回值有关联。这种情况下，Async 函数通过对每个异步函数使用 await 命令，等待上一个异步函数执行完毕后，才会执行下一个异步函数。
-- -------------------- ---- -------
----- -------- ------------- -
--- -
----- ------- - ----- ---------------- -- -------
----- ------- - ----- ------------------------ -- ----
----- ------- - ----- ---------------------- -- --
------ --------
- ----- ----- -
-----------------
-
-总结
Async 函数是对 JavaScript 异步编程解决方案的进一步增强，具有代码简单、错误处理便捷、代码结构优雅等优点。它值得广大开发者学习和运用。在实际工程应用过程中，不仅要掌握具体使用方法，更需理解其背后的异步编程思想，这对优化项目的性能和开发效率是十分有帮助的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a37a14add4f0e0ffba0848