浅谈ES6 Generator函数的异步应用与co模块的实现原理

作者: 图恩分类: 编程开发阅读: 723发布时间： 2021-04-21 06:30:37

一.Generator函数的概念

    Generator函数是 ES6 提供的一种异步编程解决方案。前面讨论过的Promise对象也是ES6提供的异步解决方案，为什么还要提出Generator呢。
    使用Promise对象处理异步固然有不少优势，尤其是可以将回调地狱的处理变为then的链式调用。但也不可避免的存在一些缺点，例如经过Promise包装的异步会包含大量的Promise名词（resolve,reject,then...），可读性不好。
    其实，异步任务的最佳处理方式应当是像操作同步任务那样操作异步任务，即异步任务之后的代码直接写在异步下面，而不是写在回调函数或then方法中。Generator 函数的提出就是为了解决这个问题。如何做到将异步的操作同步化呢。试想，我们如果能赋予函数'暂停'执行的功能，即遇到异步任务时，将当前上下文的状态暂存起来，等到异步任务结束后，拿到异步结果再继续向下执行，这样就能实现上述需求。这就是Generator 函数的异步处理思想。
    如何能实现函数的‘暂停'执行？这里要引出Iterator接口（遍历器）的概念

二.Iterator的概念

    Iterator是一种接口，它为不同的数据结构提供统一的访问机制。任何数据结构只要部署了Iterator 接口，就可以完成遍历操作。
    Iterator可以认为是一个指针对象，通过next方法对数据结构进行遍历，每次调用next方法，指针就指向数组的下一个成员并返回数据结构的当前成员的信息。该信息是一个对象，包含value和done两个属性。其中，value属性是当前成员的值，done属性是一个布尔值，表示遍历是否结束。
    ES6规定，Iterator 接口部署在数据结构的Symbol.iterator属性，调用这个接口，就会返回一个遍历器对象。
下面用数组为栗子演示

let arr = [1, 2, 3];
// 返回遍历器对象
let it = arr[Symbol.iterator]();
// 通过next方法遍历
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 }

    并不是所有的数据结构都原生具备 Iterator 接口。ES6中原生具备 Iterator 接口的数据结构如下。

  • Array
  • Map
  • Set
  • String
  • TypedArray
  • 函数的 arguments 对象
  • NodeList 对象

    Iterator 接口用于for...of循环，也就是说，一个数据结构只要部署了Iterator 接口，他就可以被for...of遍历。反之则无法遍历（如object）。
    不过，我们可以给没有原生Iterator 接口的数据结构手动部署该接口。具体来说，就是给其添加Symbol.iterator属性，它是一个函数，调用该函数，返回遍历器对象。这样，我们用for...of对其遍历时，就会手动调用我们部署的Iterator 接口。下面演示给object部署Iterator 接口。

const obj = {
  a: 'a',
  b: 'b',
  c: 'c',
  [Symbol.iterator]: function () {
    let keys = Object.keys(this);
    let index = 0;
    return {
      next: function () {
        return index < keys.length
          ? {
              value: this[keys[index++]],
              done: false,
            }
          : {
              value: undefined,
              done: true,
            };
      }.bind(this),
    };
  },
};
for (const it of obj) {
  console.log(it)
}
// a 
// b
// c

    经过上面讨论我们知道，对于遍历器，只有执行next方法，才会继续向下遍历。Generator 函数正是利用这一点，实现异步操作的同步化。进一步讲，执行 Generator 函数会返回一个遍历器对象。它可以遍历Generator 函数内部封装的多个状态。下面具体分析。

三.Generator函数的形式与基本使用

1. Generator 函数的形式。

Generator函数有两个区别于普通函数的明显特征。

  • function关键字与函数名之间有一个星号。
  • 函数体内部使用yield表达式划分不同部状态。
function*gen(){
  yield 1
  yield 2
}
// 得到遍历器对象
let g = gen()
console.log(g.next()) // { value: 1, done: false }
console.log(g.next()) // { value: 2, done: false }
console.log(g.next()) // { value: undefined, done: true }
2. yield表达式

    通过上面例子我们能看出，yield表达式就是用来划分Generator 函数的各个状态，他可以理解为函数暂停的标志。当执行next()方法，遇到yield表达式时，就暂停执行后面的操作，并将yield表达式的值作为next方法返回的信息对象的value属性值。下次调用next()方法，继续执行yield表达式后面的操作。这一点很重要，我们将利用这一点实现像操作同步那样操作异步。

function*gen(){
  yield 1+2
  yield 2+3
}
// 得到遍历器对象
let g = gen()
console.log(g.next()) // { value: 3, done: false }
console.log(g.next()) // { value: 5, done: false }
console.log(g.next()) // { value: undefined, done: true }

四.Generator函数的异步应用

    我们已经了解了Generator 函数的基本特点，回到最开始的问题，如何实现异步操作的同步化。我们的需求是在异步操作结束后，再执行后面的操作，而Generator 函数的特点是只有在执行next方法后，函数从当前状态变为下一状态。因此我们只需用yield，将每个异步操作划为一个状态，这样就可以保证遇到异步操作时函数暂停执行。而在每个异步操作结束的时，调用next方法，使得函数继续执行，这就实现了用同步操作的逻辑来操作异步。
    要实现上述，还需解决两个问题。

1. 传递异步结果

    我们知道，异步操作之后的处理往往需要异步的返回结果，那么一个首要问题就是如何将异步返回结果传递出来。
    我们要明确一点，yield表达式是没有返回值的（undefinded），也就是说直接使用下面这种方式是行不通的。

function*gen(){
  const res = yield async1()
  yield async2(res)
}

    要传递结果，我们要借助next方法。next方法如果有入参，该参数会被当作上一个yield表达式的返回值。

function*gen(){
  const res1 =  yield 1
  const res2 = yield res1+1
  yield res2+2
}
// 得到遍历器对象
let g = gen()
console.log(g.next()) // { value: 1, done: false }
// next方法传入3 认为res1=3 3+1=4
console.log(g.next(3)) // { value: 4, done: false }
console.log(g.next(4)) // { value: 6, done: false }

因此，我们只需将异步的返回结果传入next方法即可

2. 异步结束后调用next方法

    我们日常对异步的处理无非是回调函数和Promsie两种方式，因此也就有两种思路解决该问题。

2.1 基于回调函数的Generator异步流程处理

    我们只需在异步的回调函数中调用next方法，即可实现异步结束后继续执行Generator函数。

const async1 = () => {
  setTimeout(() => {
    // 执行next方法 传递异步结果
    g.next(1);
  });
};
const async2 = (res) => {
  setTimeout(() => {
    console.log(res + " from async1");
    g.next(2);
  });
};
const async3 = (res) => {
  setTimeout(() => {
    console.log(res + " from async2");
  });
};
function* gen() {
  const res1 = yield async1();
  const res2 = yield async2(res1);
  yield async3(res2);
}
// 得到遍历器对象
let g = gen();
g.next();
//1 from async1
//2 from async2

    上面的代码基本实现了需求，我们发现Generator函数内部的异步逻辑处理，如果去掉yield就基本和同步操作一样了。
    不过，上面代码的问题也很明显，我们需要对每个异步的回调进行处理。这样是很低效的，因为我们发现在回调中做的其实是同一件事，即执行next方法并传入异步返回结果。我们如果能将这个过程抽离出来，并自动执行。将使得代码逻辑大为简化。下面依次解决这两个问题。

  • 抽取回调函数的处理

    如何能将回调函数的处理抽离出来?
    以setTimeot函数为例，它接受两个参数，分别是回调函数和延时时间。而我们希望将这个两个参数分开传入，单独处理。这里就可以想到前面讨论过的柯里化函数。柯里化函数可以将接受多个参数的函数变换成接受一个单一参数，并返回接受余下参数的函数。
    还是以setTimeot函数为例，如果经过柯里化处理，我们可以先传入延时时间，再向返回的函数中传入回调，这就实现了上述需求。像下面这样

function currying(time) {
  return (cb) => {
    return setTimeout(cb, time);
  };
}
const curryTimeout = currying(500);
curryTimeout(() => {
  console.log("timeOut");
});

    接下来的问题是，在什么地方处理异步回调。我们知道，next方法返回值的value属性，就是yield表达式的执行结果。我们如果在yield后面执行经过柯里化处理过的异步（如上例中的currying(500)），就会使得next方法返回值的value属性是一个函数，可以传入异步的回调。因此我们只需将回调函数传入next方法的value属性即可。下面就基于上述对上例进行改造。

function currying(time) {
  return (cb) => {
    return setTimeout(cb, time);
  };
}

function* gen() {
  const res1 = yield currying(500);
  const res2 = yield currying(res1);
  yield currying(res2);
}

const g = gen();
g.next().value(() => {
  console.log("async1");
  g.next(500).value(() => {
    console.log("async2");
    g.next(500).value(() => {
      console.log("async3");
    });
  });
});
//每隔0.5秒依次打印async1 async2 async3

    可以看到代码逻辑清晰了很多。这里还要说明一点，事实上前面所谓的经过柯里化处理的异步，就是Thunk 函数。所谓的Thunk 函数，其实就是一个临时函数，它可以把一个多参数函数，替换成一个只接受回调函数作为参数的单参数函数。如上例中的curryTimeout函数，它就是一个只接受回调函数作为参数的中间函数，也就是Thunk 函数。用阮一峰老师的话说就是：任何函数，只要参数有回调函数，就能写成 Thunk 函数的形式。上面的例子相当于手动实现了一个丐版Thunk 函数转换器，生产环境中一般使用nodejs的Thunkify模块，它可以实现Thunk 函数的转换。
    接下来要做的就是变手动执行为自动执行。

  • 自动执行

    仔细观察手动执行Generator 函数的代码会返现，我们做的其实只有一件事，即把同一个回调传入next方法的value属性，而回调要做的就是执行next方法并传递异步结果。
    基于上述，我们可以实现Generator 函数按照既定逻辑自动执行的程序。它只需判断next方法返回值的done属性，只要不为true，就一直将回调传入next方法的value属性。
    下面用node.js fs模块的readFileAPI演示，使用thunkify模块将异步API转换为Thunk函数。准备两个文本文件，内容分别是'对酒当歌' '人生几何'。

const thunkify = require("thunkify");
const fs = require("fs");
const readFileThunk = thunkify(fs.readFile)

function* gen() {
  yield readFileThunk("./text1.txt");
  yield readFileThunk("./text2.txt");
}

function run(fn) {
  const gen = fn();
  function next(err, data) {
    // 错误优先的回调
    if (data) console.log(data.toString());
    const res = gen.next(data);
    if (res.done) return;
    res.value(next);
  }
  next();
}
run(gen);
// 对酒当歌
// 人生几何

    可以看到，有了自动执行器，我们只管在Generator函数内部处理异步，最后直接把 Generator 函数传入run函数即可，当然前提是yield表达式必须是Thunk函数。

2.2 基于Promise的Generator异步流程处理

    通过观察前面实现的基于回调的Generator函数自动执行器不难看出，自动执行的关键其实就是在异步结束后调用next方法，让Generator函数继续执行。同样，利用Promise.then方法也能做到这一点。
    沿用上面例子对其进行改造，我们要做的其实很简单

  • 将readFile函数包装为Promise
  • 利用Promise.then方法自动执行
const fs = require("fs");
function promisify_readFile(path) {
  return new Promise((resolve, reject) => {
    fs.readFile(path, (err, data) => {
      if (err) reject(err);
      else resolve(data);
    });
  });
}

function* gen() {
  yield promisify_readFile("./text1.txt");
  yield promisify_readFile("./text2.txt");
}

function run(fn) {
  const gen = fn();
  function next(data) {
    if (data) console.log(data.toString());
    const res = gen.next(data);
    if (res.done) return;
    //res.value返回的是Promise,可以通过then方法继续执行Generator
    res.value.then(next,(r)=>console.log(r))
  }
  next();
}
run(gen);

    至此我们已经基本实现了像文章开头的需求，并实现了自动执行，其实这就是著名的co模块的核心实现原理。

五.co模块及其实现原理

    co模块一个著名的用于Generator函数自动执行的模块。它的使用非常简单，只需将Generator函数传入co，即可自动执行。

const co = require("co");
function* gen() {
  const res1 = yield promisify_readFile("./text1.txt");
  console.log(res1.toString())
  const res2 = yield promisify_readFile("./text2.txt");
  console.log(res2.toString())
}
co(gen)
// 对酒当歌
// 人生几何
实现原理

    其实，经过上面对Generator函数自动执行的讨论我们能够知道，co模块核心实现原理就是我们实现的run函数的扩展。具体如下

  • co返回的是Promise 对象，因此要添加一些改变Promise状态的逻辑
  • 要确保每一步的返回值都是Promise

下面实现一个丐版的co模块

function co(gen) {
  return new Promise(function (resolve, reject) {
    gen = gen();
    if (!gen || typeof gen.next !== "function") return resolve(gen);
    function next(data) {
      const res = gen.next(data);
      if (res.done) {
        return resolve(res.value);
      } else {
        // 确保每一步的返回值都是Promise
        const value = Promise.resolve(res.value);
        value.then(next, (r) => reject(r));
      }
    }
    next();
  });
}
// 由于co返回的是Promise，因此可以指定then方法使得
// 在Generator执行完成后进行一些操作
co(gen).then(()=>console.log('end'))
// 对酒当歌
// 人生几何
// end

    co模块是async/await关键字的前身，async/await被誉为异步编程的终极解决方案，后面会着重介绍。

参考：https://es6.ruanyifeng.com/#docs/generator-async

本文章由javascript技术分享原创和收集

本文由作者创作或收集，内容引用如有问题请联系站长处理。

发表评论 (审核通过后显示评论)：

© 基于nuxt
粤ICP备20013202号
© 2020-2024 javascript技术分享