1.引言
这一篇文章准备写一下异步中的generator和async函数，下一篇文章准备写js中的运行机制，也就是eventloop和宏任务微任务，这样异步三兄弟就齐齐整整了。每篇文章后面都会配套相应的大厂面试题，大家一定不要错过。
- generator
Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同。
Generator 函数是一个状态机，封装了多个内部状态。yield相当于隔断点
执行 Generator 函数会返回一个遍历器对象，通过调用next方法使状态不断改变
next 方法可以带一个参数，该参数就会被当作上一个 yield 表达式的返回值。
//readFile是我自己封装的一个读取文件的方法，返回Promise
function * read() {
let age = yield readFile('./name.txt','utf8');
let agedata = yield readFile(./${age},'utf8');
return agedata
}
上面read是一个generator函数，
let it = read()
it是一个遍历器对象,函数调用但是里面代码还没有执行
let {value,done} = it.next()
第一次next函数开始执行知道遇到yield，此时返回一个对象，vlaue是yield后面的这个promise,done是false
value.then((data)=>{let {value,done} = it.next(data)})
等第一个文件读取完，我再next一下，传入读取的结果, 这个结果会作为上一个yield的返回值赋值给a，并执行第二个yield的语句 此时返回值agedata为{读第二个文件的promise,false}
`value.then((data)=>{
console.log(data) //打印第二个文件的内容
it.next() //函数结束，返回一个{value:第二个文件的内容,done:true}
})`
- co函数
generator是解决异步的另外一个方案，但是我们需要手动调用next方法，总感觉挺麻烦的，tj大神写了一个co库，代码就几行，能帮我们自动调用next方法，解决这generator的这个缺陷
co(it){
return new Promise((resolve,reject)=>{
function next(val){
{value,done}=it.next(val) //手动next程序到第一个yield的地方
if(done){ //都已经成功了还有什么好说的，直接返回结果就行了
resolve(value)
}else{
return Promise.resolve(value).then(next,rejext) //核心，看懂co的思想就会了
}
}
next(undefined)
})
}
重点讲解一下第八行，首先强烈建议看我的上篇文章promise
value是第一个yiled的返回值，可能是个同步，可能是个settimeout,可能是个Promise，所以不管是什么，我先给它包装成promise，让他有then方法，然后我在then方法里面递归调用next,如果后面有yield再进next方法里就会走else 自动调next，这样一个自动执行器就形成了 ，如果没有就resolve就行了。 需要特别注意的是Promise.resolve(value).then(next）这个写法，next其实是有参数的，就是value的异步结果
我们再用generator函数就可以这么用了
//read是章节2中的generator函数
co(read()).then((data)=>{
console.log(data)
})
是不是超级简单
- async、await
async、awiat实际上就是generator+co函数的语法糖，实际也可以说就是generator+promise实现的，就是 generator+自执行器
function * read() {
let age = yield readFile('./name.txt','utf8');
let agedata = yield readFile(./${age},'utf8');
return agedata
}
async read(){
let age = await readFile('./name.txt','utf8');
let agedata = await readFile(./${age},'utf8');
return agedata
}
从上面可以看出是不是就是*换成async,yield换成await?
但是我们用同步写法写async 可以使用try catch
- await时发生了什么
本来这章我觉得应该放在下篇文章里面讲的，不过，既然刚讲了async await的原理，咱就打铁趁热吧
如果你有eventloop和微任务宏任务的相关知识，那么接着往下看，否则请移步到我的下篇文章
5.1 执行顺序
先讲一下执行顺序
promise.then 是一个微任务，所以浏览器里它肯定不是settimeout实现的，上一篇文章只是写了个符合A+规范的实现
async read(){
console.log(1)
let age = await readFile('./name.txt','utf8');
let agedata = await readFile(./${age},'utf8');
return agedata
}
read执行时，是不是先回默认调一下next，所以第一个await前的都是同步代码，然后第一个await后面的是不是会包装成一个promise然后调用then方法呀？then了以后调用next后面的代码才会执行。所以第一个await后面的代码可以看成再promise.then里面的，相当于是一个微任务，所以程序在主栈里面执行async函数，会先执行await前面的宏任务，然后遇到await，await后面的会先放到微任务队列里面，返回主栈去执行主栈里面的其他宏任务
比较官方的说法：async 函数返回一个 Promise 对象，当函数执行的时候，一旦遇到 await 就会先返回，等到触发的异步操作完成，再执行函数体内后面的语句。可以理解为，是让出了线程，跳出了 async 函数体。
5.2 await的一些情况
说一些比较可能的情况
await后面是个基本类型
包装成一个promise后是不是可以直接调用then中next方法？所以基本类型不会影响
如果是一个promise
如果等待一下时间能成功，那么一段时间会继续往后执行，原因和之前的一样
如果是一个一段时间后失败的Promise呢，then后面会走reject, 而co函数里面reject中可没有调用next方法哦 所以函数就挂了后面的代码不会执行，会默认抛错
但是我们用同步写法写async await的时候是可以用try catch的
- 面试题
6.1 异步史
setTimeout、Promise、Async/Await 的区别？
答案：
回调函数
缺点：回调地狱 没有返回值
promise
优点：解决回调地狱，提供的一些方法还是挺好用的
缺点：还是要写大量回调函数，挺麻烦的；错误必须捕获（不捕获反应不到外面）
generaotr
缺点：需要写next,或者说缺一个自执行器
async await
优点 可以用try catch 捕获异常，将异步代码改成同步代码
缺点 如果几个await没有依赖性，会有性能问题，这个啥意思呢，
比如读文件1后根据文件1的内容才能读文件2 这个是有依赖的吧，我用async挺好的，利用next来控制 第一个文件读2秒，第二个文件读2秒共四秒
但是如果文件1文件2没有关系，我明明可以同时开启两个文件的读取呀，用await就会阻塞，这也是我刚说的promise有些方法还是很好用的，比如这里可以使用的promise.all
6.2 原理类
Async/Await 如何通过同步的方式实现异步
答案；解释下generator+手写一个co函数
更多资料的获取方式：
一、搜索QQ群，前端学习交流群：1093606290
二、https://jq.qq.com/?_wv=1027&k=MlDBtuEG
三、
