如何理解 Generator、Async/await 等异步编程的语法糖

最新推荐文章于 2022-03-29 09:26:26 发布

从人到猿

最新推荐文章于 2022-03-29 09:26:26 发布

阅读量304

点赞数 1

分类专栏： JavaScript 核心原理精解文章标签： javascript

本文链接：https://blog.csdn.net/qq_39200185/article/details/121142180

版权

JavaScript 核心原理精解专栏收录该内容

22 篇文章 10 订阅

订阅专栏

如何理解 Generator、Async/await 等异步编程的语法糖

Generator是 ES6标准中的异步编程方式，而 async/await 是 ES7标准中的。希望通过这篇文章，能对这两种编程方式有更深的理解。

那么在开始前请先思考一下：

Generator执行之后，最后返回的是什么？
async/await的方式比 Promise和 Generator好在哪里？

Generator 基本介绍

Generator（生成器）是 ES6的新关键词，学习起来比较晦涩难懂，那么什么是 Generator的函数呢？通俗来讲 Generator是一个带星号的“函数”（它并不是真正的函数，下面的代码会为你验证），可以配合 yield关键字来暂停或者执行函数。我们来看一段使用 Generator的代码，如下所示。

function* gen() {
  console.log("enter");
  const a = yield 1;
  const b = yield () => 2;
  return 3;
}
const g = gen();
console.log(g.next());
console.log(g.next());
console.log(g.next());
console.log(g.next());

/* 
执行结果
enter
{ value: 1, done: false }
{ value: [Function], done: false }
{ value: 3, done: true }
{ value: undefined, done: true } */

结合上面的代码，我们分析一下 Generator函数的执行情况。Generator中配合使用 yield关键词可以控制函数执行的顺序，每当执行一次 next方法，Generator函数会执行到下一个存在 yield关键词的位置。

总结下来，Generator的执行有这几个关键点。

调用 gen() 后，程序会阻塞住，不会执行任何语句。
调用 g.next() 后，程序继续执行，直到遇到 yield关键词时执行暂停。
一直执行 next方法，最后返回一个对象，其存在两个属性：value和 done。

yield基本介绍

yield同样也是 ES6的新关键词，配合 Generator执行以及暂停。yield关键词最后返回一个迭代器对象，该对象有 value和 done两个属性，其中 done属性代表返回值以及是否完成。yield配合着 Generator，再同时使用 next方法，可以主动控制 Generator执行进度。

前面说 Generator的时候，举的是一个生成器函数的示例，下面看看多个 Generator配合 yield使用的情况，请看下面一段代码。

function * gen1() {
    yield 1;
    yield gen2();
    yield 4;
}
function *gen2() {
    yield 2;
    yield 3;
}
const g = gen1();
console.log(g.next());
console.log(g.next());
console.log(g.next());
console.log(g.next());

/* 
    输出结果
    { value: 1, done: false }
    { value: Object [Generator] {}, done: false }
    { value: 4, done: false }
    { value: undefined, done: true }
*/

从上面的代码中可以看出，使用 yield关键词的话还可以配合着 Generator函数嵌套使用，从而控制函数执行进度。这样对于 Generator的使用，以及最终函数的执行进度都可以很好地控制，从而形成符合你设想的执行顺序。即便 Generator函数相互嵌套，也能通过调用 next方法来按照进度一步步执行。

那么讲到这里可能会有几个疑惑，Generator和异步编程有什么联系？怎么才可以把 Generator函数按照顺序一次性执行完呢？接着往下看，就会明白了。

thunk 函数介绍

下面看一下 thunk函数，直接说概念可能会有些晦涩，我们通过一段代码来了解一下什么是 thunk函数，就拿判断数据类型来举例，代码如下。

const isString = obj =>{
    return Object.prototype.toString.call(obj) === '[object String]';
}
const isFunction = obj =>{
    return Object.prototype.toString.call(obj) === '[object Function]';
}
const isArray = obj =>{
    return Object.prototype.toString.call(obj) === '[object Array]';
}

可以看到，其中出现了非常多重复的数据类型判断逻辑，平常业务开发中类似的重复逻辑的场景也同样会有很多。将它们做一下封装，如下所示。

const isType = type =>{
    return obj=> Object.prototype.toString.call(obj) === `[object ${type}]`;
}

那么封装了之后可以这么来使用，从而来减少重复的逻辑代码，如下所示。

const isType = type =>{
    return obj=> Object.prototype.toString.call(obj) === `[object ${type}]`;
}

const isArray = isType('Array');
const isString = isType('String');
console.log(isString('123')); // true
console.log(isArray([1,2,3])); // true

相应的 isString和 isArray是由 isType方法生产出来的函数，通过上面的方式来改造代码，明显简洁了不少。像 isType这样的函数我们称为 thunk函数，它的基本思路都是接收一定的参数，会生产出定制化的函数，最后使用定制化的函数去完成想要实现的功能。

这样的函数在 JS的编程过程中会遇到很多，尤其是在阅读一些开源项目时，抽象度比较高的 JS代码往往都会采用这样的方式。

那么请想一下，Generator 和 thunk函数的结合是否能带来一定的便捷性呢？

Generator 和 thunk 结合

下面以文件操作的代码为例，看一下 Generator和 thunk的结合能够对异步操作产生什么样的效果。

const fs = require('fs')
const readFileThunk = (filename) =>{
    return (callback) =>{
        fs.readFile(filename,callback);
    }
}
const gen = function *(){
    const data1 = yield readFileThunk('./demo1.txt')
    console.log(data1.toString());
    const data2 = yield readFileThunk('./demo2.txt')
    console.log(data2.toString());
}
const g = gen();
g.next().value((err,data1)=>{
    g.next(data1).value((err,data2)=>{
        g.next(data2);
    })
})
/* 
执行结果：  
这里是demo1的内容
这里是demo2的内容
*/

readFileThunk就是一个 thunk函数，上面的这种编程方式就让 Generator和异步操作关联起来了。上面第三段代码执行起来嵌套的情况还算简单，如果任务多起来，就会产生很多层的嵌套，可读性不强，因此有必要把执行的代码封装优化一下，如下所示。

const fs = require('fs')
const readFileThunk = (filename) =>{
    return (callback) =>{
        fs.readFile(filename,callback);
    }
}
const gen = function *(){
    const data1 = yield readFileThunk('./demo1.txt')
    console.log(data1.toString());
    const data2 = yield readFileThunk('./demo2.txt')
    console.log(data2.toString());
}
const g = gen();
// 改造代码
const run = (gen)=>{
    const next = (err,data)=>{
        let res = gen.next(data);
        if (res.done) {
            return ;
        }
        res.value(next);
    }
    next();
}
run(g);
/* 
执行结果：  
这里是demo1的内容
这里是demo2的内容
*/

改造完之后，可以看到 run函数和上面的执行效果其实是一样的。代码虽然只有几行，但其包含了递归的过程，解决了多层嵌套的问题，并且完成了异步操作的一次性的执行效果。这就是通过 thunk函数完成异步操作的情况，可以好好体会一下。

Generator 和 Promise 结合

还是利用上面的输出文件的例子，对代码进行改造，如下所示。

const fs = require("fs");

// 最后包装成promise对象返回
const readFilePromise = (filename) => {
  return new Promise((resolve, reject) => {
    fs.readFile(filename, (err, data) => {
      if (err) {
        reject(err);
      } else {
        resolve(data);
      }
    });
  }).then((res) => res);
};

const gen = function* () {
  const data1 = yield readFilePromise("./demo1.txt");
  console.log(data1.toString());
  const data2 = yield readFilePromise("./demo2.txt");
  console.log(data2.toString());
};

const g = gen();

// 这块和上面 thunk 的方式一样
const run = (gen) => {
  const next = (data) => {
    let res = gen.next(data);
    if (res.done) {
      return;
    }
    res.value.then(next);
  };
  next();
};

run(g);
/* 
执行结果  
这里是demo1的内容
这里是demo2的内容
*/

从上面的代码可以看出，thunk函数的方式和通过 Promise方式执行效果本质上是一样的，只不过通过 Promise的方式也可以配合 Generator函数实现同样的异步操作。希望能参照上面 thunk的例子，仔细体会一下递归调用的过程。

co 函数库

co函数库是著名程序员 TJ发布的一个小工具，用于处理 Generator函数的自动执行。核心原理其实就是上面讲的通过和 thunk函数以及 Promise对象进行配合，包装成一个库。它使用起来非常简单，比如还是用上面那段代码，第三段代码就可以省略了，直接引用 co函数，包装起来就可以使用了，代码如下。

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

// 最后包装成promise对象返回
const readFilePromise = (filename) => {
  return new Promise((resolve, reject) => {
    fs.readFile(filename, (err, data) => {
      if (err) {
        reject(err);
      } else {
        resolve(data);
      }
    });
  }).then((res) => res);
};

const gen = function* () {
  const data1 = yield readFilePromise("./demo1.txt");
  console.log(data1.toString());
  const data2 = yield readFilePromise("./demo2.txt");
  console.log(data2.toString());
};

const g = gen();

co(g).then((res) => {
  console.log(res);
});

/* 
执行结果  
这里是demo1的内容
这里是demo2的内容
*/

这段代码比较简单，几行就完成了之前写的递归的那些操作。那么为什么 co函数库可以自动执行 Generator函数，它的处理原理是什么呢？

因为 Generator函数就是一个异步操作的容器，它需要一种自动执行机制，co函数接受 Generator函数作为参数，并最后返回一个 Promise对象。
在返回的 Promise对象里面，co先检查参数 gen是否为 Generator函数。如果是，就执行该函数；如果不是就返回，并将 Promise对象的状态改为 resolved。
co将 Generator函数的内部指针对象的 next方法，包装成 onFulfilled函数。这主要是为了能够捕捉抛出的错误。
关键的是 next函数，它会反复调用自身。

async/await 介绍

JS 的异步编程从最开始的回调函数的方式，演化到使用 Promise对象，再到 Generator+co函数的方式，每次都有一些改变，但又让人觉得不彻底，都需要理解底层运行机制。

而 async/await被称为 JS中异步终极解决方案，它既能够像 co+Generator 一样用同步的方式来书写异步代码，又得到底层的语法支持，无须借助任何第三方库。

接下来，我们就从原理的角度来看看 async/await 这个语法糖背后到底做了哪些优化和改进，使得我们用起来会更加方便。还是按照上面 Generator和 Promise结合的例子，使用 async/await语法糖来进行改造，请看改造后的代码。

const fs = require("fs");
const readFilePromise = (filename) => {
  return new Promise((resolve, reject) => {
    fs.readFile(filename, (err, data) => {
      if (err) {
        return;
      } else {
        resolve(data);
      }
    });
  }).then((res) => res);
};

// 这里把 Generator的 * 换成 async，把 yield 换成 await
const gen = async () => {
  const data1 = await readFilePromise("./demo1.txt");
  console.log(data1.toString());
  const data2 = await readFilePromise("./demo2.txt");
  console.log(data2.toString());
};
gen();
/* 
执行结果  
这里是demo1的内容
这里是demo2的内容
*/

从上面的代码中可以看到，虽然简单地将 Generator的 * 号换成了 async，把 yield换成了 await，但其实 async的内部做了不少工作。我们根据 async的原理详细拆解一下，看看它到底做了哪些工作。

总结下来，async函数对 Generator函数的改进，主要体现在以下三点。

内置执行器：Generator函数的执行必须靠执行器，因为不能一次性执行完成，所以之后才有了开源的 co函数库。但是，async函数和正常的函数一样执行，也不用 co函数库，也不用使用 next方法，而 async函数自带执行器，会自动执行。
适用性更好：co函数库有条件约束，yield命令后面只能是 Thunk函数或 Promise对象，但是 async函数的 await关键词后面，可以不受约束。
可读性更好：async和 await，比起使用 *号和 yield，语义更清晰明了。

说了这么多优点，还是通过一段简单的代码来看下 async返回的结果，是不是使用起来更方便，请看下面的代码。

async function func() {

  return 100;

}

console.log(func());

// Promise {<fulfilled>: 100}

从执行的结果可以看出，async函数 func最后返回的结果直接是 Promise对象，比较方便让开发者继续往后处理。而之前 Generator并不会自动执行，需要通过 next方法控制，最后返回的也并不是 Promise对象，而是需要通过 co函数库来实现最后返回 Promise对象。

这样看来，ES7 加入的 async/await 的确解决了之前的问题，使开发者在编程过程中更容易理解，语法更清晰，并且也不用再单独引用 co函数库了。因此用 async/await 写出的代码也更加优雅，相比于之前的 Promise和 co+Generator 的方式更容易理解，上手成本也更低，不愧是 JS异步的终极解决方案。

总结

异步编程方法	特点
Generator	生成器函数配合着`yield`关键词来使用，不自动执行，需要执行`next`方法一步一步往下执行
Generator+co	通过引入开源`co`函数库，实现异步编程，并且还能控制返回结果为`Promise`对象，方便后学继续操作，但是要求`yield`后面，只能是`thunk`函数或者`Promsie`对象
async/await	ES7引入的终极异步编程解决方案，不用引入其他任何库，对于`await`后面的类型无限制，可读性更好，容易理解。

从人到猿

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
如何理解 Generator、Async/await 等异步编程的语法糖

如何理解 Generator、Async/await 等异步编程的语法糖 Generator是 ES6标准中的异步编程方式，而 async/await 是 ES7标准中的。希望通过这篇文章，能对这两种编程方式有更深的理解。那么在开始前请先思考一下：Generator执行之后，最后返回的是什么？async/await的方式比 Promise和 Generator好在哪里？Generator 基本介绍 Generator（生成器）是 ES6的新关键词，学习起来比较晦涩难懂，那么什么是 Gen
复制链接

扫一扫