前言

async await 语法是 ES7出现的，是基于ES6的 promise和generator实现的

generator函数

在之前我专门讲个generator的使用与原理实现，大家没了解过的可以先看那个手写generator核心原理，再也不怕面试官问我generator原理

这里就不再赘述generator，专门的文章讲专门的内容。

await在等待什么

我们先看看下面这代码,这是async await的最简单使用，await后面返回的是一个Promise对象：

复制 1async function getResult() {
 2    await new Promise((resolve, reject) => {
 3        setTimeout(() => {
 4            resolve(1);
 5            console.log(1);
 6        }, 1000);
 7    })
 8}
 9
10getResult()

但不知你有没有想过一个问题，为什么会等到返回的promise的对象的状态为非pending的时候才会继续往下执行，也就是resolve执行之后，才会继续执行，就像下面的代码一样

复制 1async function getResult() {
 2    await new Promise((resolve, reject) => {
 3        setTimeout(() => {
 4            resolve(1);
 5            console.log(1);
 6        }, 1000);
 7    })
 8    console.log(2);
 9}
10
11getResult()

 

可以看到运行结果是先打印了1，再打印2了，也就是说明在返回的promise对象没执行resolve()前，就一直在await，等它执行。然后再执行下面的程序，那这个是怎么实现的呢？

原理实现

我们看一下下面的代码，输出顺序是什么？

复制 1async function getResult() {
 2    await new Promise((resolve, reject) => {
 3        setTimeout(() => {
 4            resolve(1);
 5            console.log(1);
 6        }, 1000);
 7    })
 8    
 9
10    await new Promise((resolve, reject) => {
11        setTimeout(() => {
12            resolve(2);
13            console.log(2);
14        }, 500);
15    })
16
17    await new Promise((resolve, reject) => {
18        setTimeout(() => {
19            resolve(3);
20            console.log(3);
21        }, 100);
22    })
23
24}
25
26getResult()

没错是 1，2，3.

那用generator函数专门来实现这个效果呢

我一开始这样来实现：

复制 1function* getResult(params) {
 2    
 3    yield new Promise((resolve, reject) => {
 4        setTimeout(() => {
 5            resolve(1);
 6            console.log(1);
 7        }, 1000);
 8    })
 9
10    yield new Promise((resolve, reject) => {
11        setTimeout(() => {
12            resolve(2);
13            console.log(2);
14        }, 500);
15    })
16
17    yield new Promise((resolve, reject) => {
18        setTimeout(() => {
19            resolve(3);
20            console.log(3);
21        }, 100);
22    })
23}
24const gen = getResult()
25
26gen.next();
27gen.next();
28gen.next(); 

但是发现打印顺序是 3，2，1.明显不对。

这里的问题主要是三个 new Promise几乎是同一时刻执行了。才会出现这种问题，所以需要等第一个promise执行完resolve之再执行下一个，所以要这么实现

复制 1function* getResult(params) {
 2
 3    yield new Promise((resolve, reject) => {
 4        setTimeout(() => {
 5            resolve(1);
 6            console.log(1);
 7        }, 1000);
 8    })
 9
10    yield new Promise((resolve, reject) => {
11        setTimeout(() => {
12            resolve(2);
13            console.log(2);
14        }, 500);
15    })
16
17    yield new Promise((resolve, reject) => {
18        setTimeout(() => {
19            resolve(3);
20            console.log(3);
21        }, 100);
22    })
23}
24const gen = getResult()
25
26gen.next().value.then(() => {
27    gen.next().value.then(() => {
28        gen.next();
29    });
30});

可以看到这样就打印正常了。

 

特别 需要解释下。gen.next().value 就是返回的promise对象，不理解的可以看看文首介绍的那篇generator的 文章。手写generator核心原理，再也不怕面试官问我generator原理

优化

但是呢，总不能有多少个await，就要自己写多少个嵌套吧，所以还是需要封装一个函数，显然，递归实现最简单

复制 1function* getResult(params) {
 2
 3    yield new Promise((resolve, reject) => {
 4        setTimeout(() => {
 5            resolve(1);
 6            console.log(1);
 7        }, 1000);
 8    })
 9
10    yield new Promise((resolve, reject) => {
11        setTimeout(() => {
12            resolve(2);
13            console.log(2);
14        }, 500);
15    })
16
17    yield new Promise((resolve, reject) => {
18        setTimeout(() => {
19            resolve(3);
20            console.log(3);
21        }, 100);
22    })
23}
24const gen = getResult()
25
26function co(g) {
27    g.next().value.then(()=>{
28        co(g)
29    })
30}
31
32co(gen)

再来看看打印结果

 

可以发现成功执行了，但是为什么报错了？

这是因为generator方法会返回四次，最后一次的value是undefined。

而实际上返回第三次就表示已经返回done，代表结束了，所以，我们需要判断是否是已经done了，不再让它继续递归

所以可以改成这样

复制 1function* getResult(params) {
 2
 3    yield new Promise((resolve, reject) => {
 4        setTimeout(() => {
 5            resolve(1);
 6            console.log(1);
 7        }, 1000);
 8    })
 9
10    yield new Promise((resolve, reject) => {
11        setTimeout(() => {
12            resolve(2);
13            console.log(2);
14        }, 500);
15    })
16
17    yield new Promise((resolve, reject) => {
18        setTimeout(() => {
19            resolve(3);
20            console.log(3);
21        }, 100);
22    })
23}
24const gen = getResult()
25
26function co(g) {
27    const nextObj = g.next();
28    if (nextObj.done) {
29        return;
30    }
31    nextObj.value.then(()=>{
32        co(g)
33    })
34}
35
36co(gen)

 

可以看到这样就实现了。

完美，这个co其实也是大名鼎鼎的co函数的简单写法