为什么我们喜欢用 async function

小明是个菜鸟程序员，他写了三个延时1秒执行的函数 fn1, fn2, fn3:

var fn1 = function () {     setTimeout(function () {      console.log('fn1 is executed');    }, 1000);};var fn2 = function () {     setTimeout(function () {      console.log('fn2 is executed');    }, 1000);};var fn3 = function () {     setTimeout(function () {      console.log('fn3 is executed');    }, 1000);};

并且希望他们按照顺序一个一个执行。

小明问： 可以写成这样吗？

(function seq(fn1, fn2, fn3) {    fn1();    fn2();    fn3();})(fn1, fn2, fn3);

当然不行了. 主进程看到延时函数会把它们添加到主进程尾端的时间队列中。延时一秒后，3个回调函数随即执行。所以结果是一起出来的。

可是小明说： 我很任性，我就是希望按照这种思路写，直观简单，不行吗？否则我就不做码农了。

好好好，算你狠，只好给你一个装备，让你装逼下了。

这就是 async function了。

不过在执行之前，我们需要稍微改动下我们之前的fn1, fn2, fn3。

因为asyn function 如果不用promise对象就没啥意义了。

改写如下：

var fn1 = function () {  return new Promise(function (resolve, reject) {    setTimeout(function () {      resolve();      console.log('fn1 is executed');    }, 1000);  });};var fn2 = function () {  return new Promise(function (resolve, reject) {    setTimeout(function () {      console.log('fn2 is executed');      resolve();    }, 1000);  });};var fn3 = function () {  return new Promise(function (resolve, reject) {    setTimeout(function () {      console.log('fn3 is executed');      resolve();    }, 1000);  });};

小明说：这种改写我还能接受，别给我整得太复杂就好。

好了，让我们来执行他们把：

(async function seq(fn1, fn2, fn3) {   await fn1();   await fn1();   await fn1();})(fn1, fn2, fn3);

结果如下：fn1 is executed  fn2 is executedfn3 is executed这三条分别按照时间顺序一秒一秒的执行。

小明很高兴： 看来只要在执行的主函数里面加一个async 和一个await就好了啊！看来学编程就是这么的so easy!

可是小明又有问题了： 如果我要执行的不是3个函数，而是30个函数怎么办，难道我要写30个await吗，那手好酸。还有啊， 执行完毕以后能不能告诉我下，否则我怎么知道执行了多少个以后是完全结束呢?

小明真是会偷懒的孩子，不过没关系，我们改写下执行的主函数：

(async function seq(...arr) {  for (let value of arr) {    await value();  }  return 'done';})(fn1, fn2, fn3).then(function(value ){ console.log(value);});

结果如下：fn1 is executedfn2 is executedfn3 is executeddone

我们来总结下：

1. 把需要执行的函数改写成可以返回的promise对象。
2. 用async await 改写下普通函数。
3. 用展开表达式让async function 接受任意数量的参数。
4. 用 for … of 循环，遍历每个await返回的函数。
5. 当所有await全部完成以后，return一个值 ，这里写的是’done’, 这个值会被then捕获到并且进行后续操作。因为return的仍然是一个promise对象。

OK, 现在大家知道小明为什么喜欢用 async function了吧？