async & await

先从字面意思理解一下 ：

async：异步，用于申明一个 function 是异步的

await：async wait，用来等待一个异步方法执行完毕

规则：await只能在async中使用

而async到底起的什么作用呢？

写一个函数看一下输出：

观察 async 作用

ok，看起来，它只是将返回值封装成promise对象。

而官方文档也是这么介绍的：

async函数（包含函数语句、函数表达式、Lambda表达式）会返回一个 Promise 对象，如果在函数中 return 一个直接量，async 会把这个直接量通过 Promise.resolve() 封装成 Promise 对象。

前面说了await只能在async中使用，所以我们在async的外层并不能使用await获取其返回值，那么我们只好用then()链式处理这个promise对象。我们再打印一下看看。

处理 promise 对象

如果莫得返回值呢？async会返回啥子呢？

undefined

ok。

我们还知道promise的特点是无等待，也就是说执行async函数时，如果莫得await，那么这个函数会立即执行，返回一个promise对象。也就是说离开了await，async就是一个返回promise对象的普通函数，并没用什么特别之处。所以关键还是在于await。

按照官方说法：await等待的是一个表达式，这个表达式的计算结果是Promise对象或者其它值。

！await 等的是什么，不是async函数，而是一个返回值。！！

await可以用来等待一个async函数的返回值， 但并不仅仅只能等待async返回的promise对象，它可以等任意表达式的结果。也就是说你就算在await后面跟普通函数也是可行的。比如：

await 等式右侧应该写什么？

重点来了，上面说了await在等什么，那么当她等来了她要等的之后呢？

有两种情况：

1. 如果等来的不是promise对象，await会阻塞后面的代码，先执行async外面的同步代码，同步代码执行完，再回到async内部，把这个非promise的东西，作为 await表达式的结果。

2. 如果等来了promise对象，await 会阻塞后面的code，先执行async外面的同步代码，同步代码执行完，再回到async内部，等到promise对象resolve，然后得到resolve的值，作为await表达式的运算结果。比如上面的代码图，我们知道asyncFunc的返回值显然是promise对象，然而打印出的val1却是promise对象的resole的值，就是这个原因。

大概就是这个样子，那么 async/await 的优势也就显而易见了：

优势在于处理then链。我们知道promise通过then链来解决回调地狱的问题，而 async/await 的存在又是为了进一步优化 promise 的then链。

我们上代码举例说明它是怎么优化的。

代码来源网上

ok，先用promise的方式处理这三个step函数：

promise 方式

如果使用 async/await 来实现呢？

async/await 方式

相较而言，async/await 的写法清晰了很多。然而这样还是体现的不够明显。我们改一下需求再看。

仍然是三个步骤，但每一个步骤都需要之前每个步骤的结果。

仍是网上案例

ok，我们来看一下如果用promise写会写成什么样：

promise 方式解决新的需求

surprise ? 由此可见，复杂的参数处理，是promise不可避免的弊端。看着这么多的参数传递感觉要疯了哈哈，别急，我们再试试用 async/await 来写：

async/await 方式解决新的需求

没错，简洁至此，眼笑眉舒。