async/await及实现原理

今天我们要说的主⼈公是ES7中新引⼊的语法 “async + await”，被称为异步的完美解决⽅案。当然了不是一开始说我们搞⼀个异步的完美解决⽅案吧，然后就叫async，await。

这是有一个过程的。

他们的前身，来源于 generator + co，这样的⼀个组合，来实现了⼀个异步解决的最优解，不单纯的靠回调函数和Promise。⽽是把异步代码，同步化。

generator函数

generator直译过来叫做⽣成器。⽣成器⼲嘛的，⽤来⽣成迭代器。那迭代器⼜是什么？

迭代器：ES6中提出的⼀种统⼀化迭代数据结构的解决⽅案。

接下来我们们⽤代码说话，这样对于上⾯的概念会解释的更清晰。

function *generator() {
  yield 1;
  yield 2;
  yield 3;
}

这样的⼀个函数就叫做⽣成器函数，但是我们看这个函数结构好像和我们的普通函数不⼀样，⾥⾯出现了，两个我们之前不在函数中使⽤的两个标志

• ⼀个 *
• ⼀个 yield 关键字

*作⽤： ⽤于说明，我接下来要声明⼀个函数，不是普通函数了，叫做⽣成器函数了。

yield关键字必须陪在⽣成器函数使⽤，不能单独使⽤。

基本使用

接下来看看这个函数该怎么⽤，和我们的普通函数有啥不⼀样的东⻄。

function *generator() {
  yield 1;
  yield 2;
  yield 3;
}

let it = generator(); // 这个it 就是⼀个迭代器。
console.log(it.next()); // {value: 1, done: false}
console.log(it.next()); // {value: 2, done: false}
console.log(it.next()); // {value: 3, done: false}
console.log(it.next()); // {value: undefined, done: true}
console.log(it.next()); // {value: undefined, done: true}

执⾏结果：

image.png

从这⾥我们可以看出来generator函数返回结果是⼀个迭代器。

迭代器函数，可以⽆限次的调⽤next函数，来依次输出 yield 后⾯的值。

上⾯我特意执⾏了五次，前三次next把对应的三个yield后⾯的内容输出，之后两次，返回的值是undefined。 done表示是否迭代完毕。作为迭代器本身是⼀个类似链表的结构，可以通过next不断的指针后移，然后读取相关的内容。直到最后⼀个｛value: undefined , done:true｝。

分步执行

其实从结果上⾯我们能看出来迭代器中的代码是可以分⽚执⾏的。

接下来写⼀个基于上⾯的例⼦的改写;

function *generator() {
  console.log("第⼀次next")
  yield 1;
  console.log("第⼆次next")
  yield 2;
  console.log("第三次next")
  yield 3;
}

let it = generator(); // 这个it 就是⼀个迭代器。
console.log("start")
console.log(it.next());
console.log("1")
console.log(it.next());
console.log("2")
console.log(it.next());
console.log("3")

执⾏顺序是

image.png

所以说，对于generator函数是可以分步执⾏的。

yield返回值

接下来说说 yield 返回值。

function *generator() {
  let a = yield 1;
  console.log("a的值:" + a )
  let b = yield 2;
  console.log("b的值:" + b )
  yield 3;
}

let it = generator(); // 这个it 就是⼀个迭代器。
console.log("第1次执⾏",it.next(10));
console.log("第2次执⾏",it.next(11));
console.log("第3次执⾏",it.next(22));

image.png

这三个框分别代表三次的执⾏性结果。 我们可以看出：

第⼀次的next⾥⾯传⼊的值，⽆意义。 从第⼆次开始。每次调⽤next传⼊值，作为上⼀次yeild的返回值。

这样的话，我们就可以在外边传⼊接下来我们要操作的值。

例子：读取文件内容作为下一次的名称

接下来，有⼀个这样的需求。我们需要陆续读取两个⽂件夹内的内容。作为下⼀次读取⽂件的名称。通过⼀个generator函数实现。

⽂件⽬录如下：

image.png

a.txt 存的内容是 "b.txt" b.txt 存的内容是 "c.txt" 通过三步读取操作去读 c.txt的内容。

const fs = require("fs").promises;
function* read() {
  let value = yield fs.readFile("a.txt", "utf-8");
  let value2 = yield fs.readFile(value, "utf-8");
  let value3 = yield fs.readFile(value2, "utf-8");
  return value3;
}

let it = read();
let { done, value } = it.next();
value.then(data => {
  console.log(data, "1");
  let { done, value } = it.next(data);
  value.then(data => {
    console.log(data, "2");
    let { done, value } = it.next(data);
    value.then(data => {
      console.log(data, "3");
      let { done, value } = it.next(data);
      console.log(value);
    });
  });
});

执⾏结果：

image.png

这⾥的 requrie("fs").promises 指的是 Promise化的⽂件API。所以可以看到如上的这种代码形式。 当然了，可以写成类似递归的结构。

Co库

其实 TJ⼤佬写了⼀个库 Co ⽤来解决我们上⾯的问题。

const fs = require("fs").promises;
const co = require("co");

// 使⽤Generator函数,读取两个⽂件的内容写到第三个⽂件中，⽂件名称可以⾃⾏传⼊，
// 例如 读取a.txt, 和 b.txt 然后写到 c.txt; co
function* read() {
  let value = yield fs.readFile("a.txt", "utf-8");
  let value2 = yield fs.readFile(value, "utf-8");
  let value3 = yield fs.readFile(value2, "utf-8");
  return value3;
}
co(read()).then(data => {
  console.log(data);
});

输出结果：

image.png

其实跟我们上⾯最终输出结果⼀样，只不过，我们在前⾯做了若⼲的辅助输出。

模拟Co库

接下来我们来搞⼀搞CO函数到底怎么写出来的，我们来模拟⼀个。

const fs = require("fs").promises;
// const co = require("co")

// 使⽤Generator函数,读取两个⽂件的内容写到第三个⽂件中，⽂件名称可以⾃⾏传⼊，
// 例如 读取a.txt, 和 b.txt 然后写到 c.txt; co
function* read() {
  let value = yield fs.readFile("a.txt", "utf-8");
  let value2 = yield fs.readFile(value, "utf-8");
  let value3 = yield fs.readFile(value2, "utf-8");
  return value3;
}
function co(it) {
  return new Promise((resolve, reject) => {
    function next(data) {
      // 第⼀次next中可以不⽤传值。
      let { done, value } = it.next(data);
      if (done) {
        resolve(value);
      } else {
        Promise.resolve(value).then(data => {
          next(data);
        });
      }
    }
    next();
  });
}
co(read()).then(data => {
  console.log(data);
});

我们实现Co之后，跟上⾯的结果其实是⼀样的。当然了，我们这⾥是⼀个简版的CO，如果想更深入了解CO的可以去github去研究研究代码量也不多不过⼏百⾏。 这就是⼀个 co + Generator的模型。

async + await

在这个基础上⾯扩展出来 async, await我们看看改完之后是什么样。

const fs = require("fs").promises;
// const co = require("co")

// 使⽤Generator函数,读取两个⽂件的内容写到第三个⽂件中，⽂件名称可以⾃⾏传⼊，
// 例如 读取a.txt, 和 b.txt 然后写到 c.txt; co
async function read() {
  let value = await fs.readFile("a.txt", "utf-8");
  let value2 = await fs.readFile(value, "utf-8");
  let value3 = await fs.readFile(value2, "utf-8");
  return value3;
}

read().then(data => {
  console.log(data);
});

我们把原来的 * 改成了 async； 把 yield 改成了 await。 同样，通过 async声明的函数返回仍然是⼀个Promise。 ⽽且对于await必须和 async共同使⽤。

具体实现原理请参考：https://juejin.im/post/6844904175071936519