vueasync和await用法,vueasync
谈谈 async/await 的使用方式和场景
async 是用来修饰函数的声明, 使用async 修饰的函数会变成一个异步函数. await 用来修饰函数的调用, 被 await 修饰的函数必须返回一个promise 异步对象, 使用 await 修饰后, 就会将 promise 异步对象转换成一个同步操作.
学会使用async/await
有很多 async 的面试题，例如
等等，需要找出一个规律
用同步的方式，编写异步。
和 Promise 的关系
async 函数返回结果都是 Promise 对象（如果函数内没返回 Promise ，则自动封装一下）
await 后面跟 Promise 对象：会阻断后续代码，等待状态变为 resolved ，才获取结果并继续执行
await 后续跟非 Promise 对象：会直接返回
总结来看：
异步本质
await 是同步写法， 但本质还是异步调用 。
即，只要遇到了 await ，后面的代码都相当于放在 callback 里。
for...of
定时算乘法
执行 async 函数执行返回的是 Promise 对象
await 相当于 Promise 的 then
try...catch 可捕获异常，代替 Promise 的 catch
右上图解读： async返回Promise，await返回then，await后面报错会终止执行，可以用try...catch来捕获
async/await 来处理异步/同步
前面比较啰嗦，希望读者耐心看完。
async/await可以说是一个老生常谈，但是每一个前端工程师却又避不开的话题。
在JQuery一把梭的时代，如果遇到下面类似的需求，你要怎么做？
需求：拿到第一个ajax请求省，拿到省数据请求第二个ajax来获得市的数据，拿到市的数据再请求第三个ajax来获得区的数据。
最常见的写法莫过于两种：
1、回调地狱式写法：
简直令人发疯。
或者是这样？同步请求
我靠，只要一个数据请求不回来页面就完犊子了。这简直是噩梦。
别笑，我相信身为前端工程师一定这么写过。
直到有一天，你发现vue里没有Jquery，只有基于promise写的axios.
一开始在使用axios的时候，还是脱离不了必须同步请求的变成思想，于是在vue项目中引入了jquery，把项目搞成了四不像。
研究了好久，终于发现了async/await
async 词面翻译 “异步”。 async关键字一般放到function的前面，用来表示一个异步函数。如下
根据阮一峰es6教程关于async部分的介绍，能得知async会返回一个Promise对象。所以我们可以通过then来调用。
如果不太明白，那我这么写你一定会明白：
词面意思“等待”，它只会在async函数体内出现，代表执行到这里的时候，等一下。它后面可以跟任何表达式，不过一般会跟一个Promise，可以实现异步函数同步调用的效果。
delay是异步函数，在正常情况下，如果这样写：
会先输出2，然后1秒后再输出1.
但是在await的影响下，函数会先等待5秒后输出a，在等待4秒后输出b。
话题再转回到我们一开始说的ajax，使用async/await的方法来写，是不是感觉优雅多了？
在vue中，我们会使用axios来与后台做数据交互，axios没有同步请求，只有异步请求，所以我们可以使用async/await来模拟一个同步请求，实现功能。
async/await 原理及简单实现
解决函数回调经历了几个阶段， Promise 对象， Generator 函数到async函数。async函数目前是解决函数回调的最佳方案。很多语言目前都实现了async，包括Python ，java spring，go等。
async 函数返回一个 Promise 对象，当函数执行的时候，一旦遇到 await 就会先返回，等到触发的异步操作完成，再接着执行函数体内后面的语句。
async /await 需要在function外部书写async，在内部需要等待执行的函数前书写await即可
理解async函数需要先理解Generator函数，因为async函数是Generator函数的语法糖。
Generator是ES6标准引入的新的数据类型。Generator可以理解为一个状态机，内部封装了很多状态，同时返回一个迭代器Iterator对象。可以通过这个迭代器遍历相关的值及状态。
Generator的显著特点是可以多次返回，每次的返回值作为迭代器的一部分保存下来，可以被我们显式调用。
一般的函数使用function声明，return作为回调(没有遇到return，在结尾调用return undefined)，只可以回调一次。而Generator函数使用function*定义，除了return，还使用yield返回多次。
在chrome浏览器中这个例子里，我们可以看到，在执行foo函数后返回了一个
Generator函数的实例。它具有状态值suspended和closed，suspended代表暂停，closed则为结束。但是这个状态是无法捕获的，我们只能通过Generator函数的提供的方法获取当前的状态。
在执行next方法后，顺序执行了yield的返回值。返回值有value和done两个状态。value为返回值，可以是任意类型。done的状态为false和true，true即为执行完毕。在执行完毕后再次调用返回{value: undefined, done: true}
注意:在遇到return的时候，所有剩下的yield不再执行，直接返回{ value: undefined, done: true }
Generator函数提供了3个方法，next/return/throw
next方式是按步执行，每次返回一个值,同时也可以每次传入新的值作为计算
return则直接跳过所有步骤，直接返回 {value: undefined, done: true}
throw则根据函数中书写try catch返回catch中的内容，如果没有写try，则直接抛出异常
这里可以看到在执行throw之前，顺序的执行了状态，但是在遇到throw的时候，则直接走进catche并改变了状态。
这里还要注意一下，因为状态机是根据执行状态的步骤而执行，所以如果执行thow的时候，没有遇到try catch则会直接抛错
以下面两个为例
这个例子与之前的执行状态一样，因为在执行到throw的时候，已经执行到try语句，所以可以执行，而下面的例子则不一样
执行throw的时候，还没有进入到try语句，所以直接抛错，抛出undefined为throw未传参数，如果传入参数则显示为传入的参数。此状态与未写try的抛错状态一致。
遍历
Generator函数的返回值是一个带有状态的Generator实例。它可以被for of 调用，进行遍历，且只可被for of 调用。此时将返回他的所有状态
调用for of方法后，在后台调用next(),当done属性为true的时候，循环退出。因此Generator函数的实例将顺序执行一遍，再次调用时，状态为已完成
状态的存储和改变
Generator函数中yield返回的值是可以被变量存储和改变的。
以上的执行结果中，我们可以看到，在第二步的时候，我们传入2这个参数，foo函数中的a的变量的值0被替换为2，并且在第4次迭代的时候，返回的是2。而第三次迭代的时候，传入的3参数，替换了b的值4，并在第5次迭代的时候返回了3。所以传入的参数，是替代上一次迭代的生成值。
yield 委托*
在Generator函数中，我们有时需要将多个迭代器的值合在一起，我们可以使用yield *的形式，将执行委托给另外一个Generator函数
foo在执行的时候，首先委托给了foo1，等foo1执行完毕，再委托给foo2。但是我们发现，”foo1 end” 这一句并没有输出。
在整个Generator中，return只能有一次，在委托的时候，所有的yield*都是以函数表达式的形式出现。return的值是表达式的结果，在委托结束之前其内部都是暂停的，等待到表达式的结果的时候，将结果直接返回给foo。此时foo内部没有接收的变量，所以未打印。
如果我们希望捕获这个值，可以使用yield *foo()的方式进行获取。
如上，我们掌握了Generator函数的使用方法。async/await语法糖就是使用Generator函数+自动执行器来运作的。 我们可以参考以下例子
在执行的过程中，判断一个函数的promise是否完成，如果已经完成，将结果传入下一个函数，继续重复此步骤。
async/await非常好理解，基本理解了Generator函数之后，几句话就可以描述清楚。这里没有过多的继续阐述Generator函数的内部执行逻辑及原理，如果有对此有深入理解的童鞋，欢迎补充说明。