前端面试必备——异步（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函数

6.3

7

再来几道顺序提
1.

setTimeout(() => console.log(0));
new Promise((resolve) => {
  resolve(2);
}).then((o) => console.log(o));

new Promise((resolve) => {
  resolve(5);
})
  .then((o) => console.log(o))
  .then(() => console.log(6))
.then(() => setTimeout(()=>{console.log(4)}))
.then(() => console.log(6))
.then(() => console.log(6))
// 2=>5=>6=>6=>6=>0=>4

2

setTimeout(() => {
  console.log("A");
  Promise.resolve().then(() => {
    console.log("B");
  });
}, 1000);

Promise.resolve().then(() => {
  console.log("C");
});

new Promise((resolve) => {
  console.log("D");
  resolve("");
}).then(() => {
  console.log("E");
});

async function sum(a, b) {
  console.log("F");
}

async function asyncSum(a, b) {
  await Promise.resolve();
  console.log("G");
  return Promise.resolve(a + b);
}

sum(3, 4);
asyncSum(3, 4);
console.log("H");

D F H C E G A B

3

Promise.resolve(console.log(0))
  .then(() => {
    console.log(1);
    Promise.resolve(console.log(5))
      .then(() => console.log(3))
      .then(() => console.log(4))
      .then(() => console.log(6));
  })
  .then(() => console.log(2))
  .then(() => console.log(7));

01275346

4
then里面遇到一个promise.resolve()
会额外等两个微任务的时间

Promise.resolve()
  .then(() => {
    console.log(0);
    return Promise.resolve(4);
  })
  .then((res) => {
    console.log(res);
  });

Promise.resolve()
  .then(() => {
    console.log(1);
  })
  .then(() => {
    console.log(2);
  })
  .then(() => {
    console.log(3);
  })
  .then(() => {
    console.log(5);
  })
  .then(() => {
    console.log(6);
  });
0-1-2-3-4-5-6

5

new Promise(resolve => {
    let resolvedPromise = Promise.resolve()
    resolve(resolvedPromise)
}).then(() => {
    console.log('resolvePromise resolved')
})

Promise.resolve()
   .then(() => { console.log('promise1') })
   .then(() => { console.log('promise2') })
   .then(() => { console.log('promise3') })

1-2-text-3

结语

本文详细讲解了异步中的async，本人水平有限，如果觉得有不对的地方，请在留言区指出。
如果你觉得本文对你有很大的帮助，求点赞，求收藏，求打赏，你们的支持是作者写作的最大动力！