前端面试必备——异步（async）

1.引言

上一篇文章写了异步中的promise（强烈推荐看），这一篇文章准备写一下异步中的generator和async函数，下一篇文章准备写js中的运行机制，也就是eventloop和宏任务微任务，这样异步三兄弟就齐齐整整了。每篇文章后面都会配套相应的大厂面试题，你们必定不要错过。

2. 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}

})`

3. 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)
})

是否是超级简单

4. 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

5. 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. 面试题

6.1 异步史

setTimeout、Promise、Async/Await 的区别？
JS 异步解决方案的发展历程以及优缺点？

答案：
回调函数
缺点：回调地狱 没有返回值
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函数