Promise的async与await的原理是什么呢？

promise 与 async、await#

一、回调地狱#

在 es6 兴起之后许多人都开始使用promise，promise 目的是解决 es5 中的回调地狱（callback hell），那么什么是回调地狱呢？先来提一个需求，现在需要发送 n 个 request 请求，第二个请求参数需要第一个请求的结果，第三个请求的参数需要第二个请求的结果，以此类推… ，在没有 promise 的条件下，我们不难使用 callback 写出如下的代码：

1
function ajax(url, callback) {
2
  setTimeout(() => {
3
    callback(Math.random() + url);
4
  }, 1000);
5
}
6

7
function request() {
8
  ajax('url1', res1 => {
9
    ajax(`url2?random=${res1}`, res2 => {
10
      ajax(`url3?random=${res2}`, res3 => {
11
        ajax(`url4?random=${res3}`, res4 => {
12
          // do something
13
        });
14
      });
15
    });
16
  });
17
}
18

19
request();

二、Promise#

这样确实能实现我们的需求，但是这样子的代码有什么缺点呢？不难看出我们的 request 函数越来越像个三角形 ，代码集中在上部分，下半部分全都是我们的括号，代码阅读性极差！ 这时候我们的 promise 应运而生了，使用 promise 我们可以这样重构我们的代码如下：

1
function ajax(url) {
2
  return new Promise(resolve => {
3
    setTimeout(() => {
4
      resolve(Math.random() + url);
5
    }, 1000);
6
  });
7
}
8

9
function request() {
10
  ajax('url1').then(res1 => {
11
    ajax(`url2?random=${res1}`).then(res2 => {
12
      ajax(`url3?random=${res2}`).then(res3 => {
13
        ajax(`url4?random=${res3}`).then(res4 => {
14
          // do something
15
        });
16
      });
17
    });
18
  });
19
}
20

21
request();

肯定有人说，这不还是像个三角形吗？这样使用 promise 有什么意义呢？此时我们可以借助 promise 的链式调用重构成下面这样：

1
function ajax(url) {
2
  return new Promise(resolve => {
3
    setTimeout(() => {
4
      resolve(Math.random() + url);
5
    }, 1000);
6
  });
7
}
8

9
function request() {
10
  ajax('url1')
11
    .then(res1 => {
12
      return ajax(`url2?random=${res1}`);
13
    })
14
    .then(res2 => {
15
      return ajax(`url3?random=${res2}`);
16
    })
17
    .then(res3 => {
18
      return ajax(`url4?random=${res3}`);
19
    })
20
    .then(res4 => {
21
      // do something
22
    });
23
}
24

25
request();

相对于之前的回调地狱，此时我们的代码是不是比较清晰了。但是！这还不够！这看上去还不够直观。我们想要的是阅读异步代码，类似于阅读同步代码的方式一样方便。

三、生成器（generator）#

生成器是 es6 新增的语法，它是一个特殊的迭代器，它可以用来暂停我们函数的执行！这个功能非常强大！ 生成器的语法是，在声明函数时在后面增加一个 * 号，那么这个函数就是生成器函数，直接调用该函数得到的是一个生成器句柄，该生成器是不会执行的，必须要调用生成器句柄的 next()方法后，生成器才会执行，并且执行到我们的 yield 处（如果存在 yield 就执行到第一个 yield，不存在则直接执行完毕）,该方法的返回值一个对象，结构是 {done: true/false, value: 我们 yield 后面跟的值} ，如果执行到该生成器函数末尾则 done 为 true。关于生成器的知识可以点此处查看更多

1
function* foo() {
2
  console.log('======');
3
  const a = yield 1;
4
  console.log('a', a);
5
}
6

7
const g = foo();
8
console.log('11111111');
9
const res1 = g.next();
10
console.log(res1);
11
const res2 = g.next('22222');
12
console.log(res2);

上面代码打印顺序为：

1
11111111
2
======
3
{done: false, value: 1}
4
'a','22222'
5
{done: true, value: undefined}

细心的你一定看出了，我们在 next 方法中传的参数会赋值给生成器函数中的 yield 左侧，并可以在生成器中拿到这个值后进行使用。

四、使用生成器同步化 promise#

掌握了生成器的知识我们就可以使用生成器来将我们的 promise 链式调用进行重构如下：

1
function ajax(url) {
2
  return new Promise(resolve => {
3
    setTimeout(() => {
4
      resolve(Math.random() + url);
5
    }, 1000);
6
  });
7
}
8

9
function* request() {
10
  const res1 = yield ajax('url1');
11
  const res2 = yield ajax(`url2?random=${res1}`);
12
  const res3 = yield ajax(`url3?random=${res2}`);
13
  const res4 = yield ajax(`url4?random=${res3}`);
14
  //    do something
15
  console.log(res4);
16
}
17
// 开始调用我们的生成器
18
const generator = request();
19
generator.next().value.then(res1 => {
20
  generator.next(res1).value.then(res2 => {
21
    generator.next(res2).value.then(res3 => {
22
      generator.next(res3).value.then(res4 => {
23
        generator.next(res4);
24
      });
25
    });
26
  });
27
});

可以看到我们的生成器还是三角形，优化一下成链式调用如下：

1
generator
2
  .next()
3
  .value.then(res1 => {
4
    return generator.next(res1).value;
5
  })
6
  .then(res2 => {
7
    return generator.next(res2).value;
8
  })
9
  .then(res3 => {
10
    return generator.next(res3).value;
11
  })
12
  .then(res4 => {
13
    generator.next(res4);
14
  });

此时，我们的主函数已经非常像同步代码了，但是缺点是我们目前必须手动调用该生成器，并且 request 主函数里面我们不知道有多少次 yield 调用，因此我们的生成器也不能手动调用多次，这时，我们将该生成器调用代码进行重构，重构成可以自动执行我们的生成器的函数，不需要关心 request 内部有多少次 yield 使用，重构如下：

1
function ajax(url) {
2
  return new Promise(resolve => {
3
    setTimeout(() => {
4
      resolve(Math.random() + url);
5
    }, 1000);
6
  });
7
}
8

9
function* request() {
10
  const res1 = yield ajax('url1');
11
  const res2 = yield ajax(`url2?random=${res1}`);
12
  const res3 = yield ajax(`url3?random=${res2}`);
13
  const res4 = yield ajax(`url4?random=${res3}`);
14
  //    do something
15
  console.log(res4);
16
}
17

18
function execGenerator(generatorFn) {
19
  const generator = generatorFn();
20
  function exec(res) {
21
    const { done, value } = generator.next(res);
22
    if (!done) {
23
      value.then(exec);
24
    }
25
  }
26
  exec();
27
}
28

29
execGenerator(request);

我们增加了一个自动执行函数execGenerator，该函数接受一个生成器参数，并且在内部自动进行递归调用，直至返回值的 done 属性为 true，此时我们的使用方式只需要定义一个 request 生成器函数，并且执行一下我们的自动执行函数 execGenerator ，我们的 request 就能像同步代码一样盘跑起来了，并且看起来非常直观。

五、async、await 异步代码究极解决方案#

其实 async 与 await 是我们上面生成器的语法糖而已，在内部做的事情跟我们使用生成器做的事情是一样的，使用方式如下：

1
function ajax(url) {
2
  return new Promise(resolve => {
3
    setTimeout(() => {
4
      resolve(Math.random() + url);
5
    }, 1000);
6
  });
7
}
8

9
async function request() {
10
  const res1 = await ajax('url1');
11
  const res2 = await ajax(`url2?random=${res1}`);
12
  const res3 = await ajax(`url3?random=${res2}`);
13
  const res4 = await ajax(`url4?random=${res3}`);
14
  //    do something
15
  console.log(res4);
16
}

看起来是不是跟我们的生成器 request 函数非常类似呢？使用async与await可以让我们省去写 execGenerator 函数的步骤，更加方便了我们的开发！