在现代的前端开发中，异步操作是难以避免的。而在以往的 ES5 中，处理异步任务通常是使用回调函数。但是，回调函数很容易出现回调地狱（callback hell）的问题，使得代码难以阅读和维护。事实上，ECMAScript 2016 这一版本提供了一个异步编程新模型 async 和 await，来更好地处理异步流程。本文将详细介绍 async 和 await 的使用方法，以及如何将其用于实现命令式数据处理。
Async 和 Await 简介
在 ES6 中，Promise 对象已经提供了一种可行的 解决异步编程的新方式。不过，即便Promise已经大大优化了异步代码，它还是有它的局限性。Promise 的 then() 和 catch() 方法还是不够直观，需要不断地嵌套绑定。 而 async 和 await 看起来就像顺序执行的助手，让代码看起来更加自然和同步。 async 和 await 可以更好地替代 Promise，来自然地处理异步代码和错误处理。 async 是 ES8 中的新关键字，await 是 async/await 的键关键字。
Async 和 Await 用法
Async
async 函数是相对于 Promise 函数的新概念，并包括 Promise 函数提供的所有特点。async 函数定义需要在 async 前面添加 async 关键字。async 函数隐式返回一个 Promise，并通过 resolve() 包裹了函数体最后的表达式的返回值。如果 async 函数内抛出一个异常，则 await 表达式所在的 Promise 将被 reject()。async 函数语法：
async function funcName (parameter1, parameter2, ...) {
// function body
}Await
await 可以将它自身右侧的表达式转换成一个 Promise，并暂停 async 函数的执行。await 表达式会暂停代码的执行，等待 Promise 的状态变化。当 Promise 的状态变为 resolved 时，await 表达式的返回结果就为 Promise 的 resolve 结果。如果 Promise 的状态变为 rejected 时，则会抛出错误。await 表达式语法：
async function funcName () {
const result = await Promise
}需要注意的是，await 只能用在 async 函数体内部，否则会有语法错误。
Async/Await 示例
-- -------------------- ---- -------
----- -------- ------------ -- -
----- ---------- -- -- ----- --------- ---------------- ----- ---
------ -----------
-
----- -------- ---- -- -
--- -
------------------------ -- -- -----------
----- ------ - ----- -------------- -- -- --------- --- ----------------- ----- ---
------------------- -- -- -----------
----------------------- -- -- ----------
- ----- ------- -
-------------------- -- -------------
-
-async/await 实现命令式数据处理
命令式编程通常是指通过明确的定义，及一条条的语句分步实现某一实际问题的处理。相对而言的，函数式编程则通常是通过函数式的调用来实现数据的处理。函数式语言的实际问题处理通常会以声明的形式说明需要使用什么类型的函数来披露问题的本质，而不仅仅是确认问题的实现。
使用 async/await 提供了一种流畅的方式来描述命令式数据流。这里有一个命令式处理数据流的示例，其中混合了 async/await 和函数式编程思想：
-- -------------------- ---- -------
----- ------------ - ----- ----------- ----- -- -
------ ----- ----------------------- -- -
------ ------ ---- --- ----
--
-
----- ------- - ----- ----------- ------- -- -
------ ----- -------------------- -- -
------ ------------
--
-
----- --------- - ----- ----------- -- -
--- ------ - --
--- ---- ---- -- ---------- -
----------------- ---
-
------ ----- --------------- ---
-
----- -------- - ----- ----------- ---------- -- -
------ ----- -------------------------
-
----- ---- - --- ---- -- ---- -- ----
----- ------ - ----- -------------- --------------- ------------- ------------------ ---------- ------ -- -
------ ---- - -
---- ----
-------------------这个例子很简化，但实际上这些操作都感觉良好且清晰 - 我们使用 async/await 将异步操作合并到一起来形成一个连续的异步数据处理流程。
总结
async 和 await 提供了一种新的异步编程模型，让代码看起来更加自然和同步。async 函数是相对于 Promise 函数的新概念，并包括 Promise 函数提供的所有特点；await 可以将它自身右侧的表达式转换成一个 Promise，并暂停 async 函数的执行。async 和 await 的使用可以非常方便地实现命令式数据流的处理。async/await 这一模式提供了一个比设计模式更优美而简单的处理异步问题的方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b3498248841e9894f8bb65