ES6标准入门 摘要 (Generator 函数的异步应用)

基本概念

异步

所谓"异步",简单说就是一个任务不是连续完成的,可以理解成该任务被人为分成两段,先执行第一段,然后转而执行其他任务,等做好了准备,再回过头执行第二段。

相应地,连续的执行就叫做同步。由于是连续执行,不能插入其他任务,所以这段时间,程序只能干等着。

回调函数

JavaScript 语言对异步编程的实现,就是回调函数。所谓回调函数,就是把任务的第二段单独写在一个函数里面,等到重新执行这个任务的时候,就直接调用这个函数。

Promise

回调函数本身并没有问题,它的问题出现在多个回调函数嵌套。

不难想象,如果依次读取两个以上的文件,就会出现多重嵌套。代码不是纵向发展,而是横向发展,很快就会乱成一团,无法管理。因为多个异步操作形成了强耦合,只要有一个操作需要修改,它的上层回调函数和下层回调函数,可能都要跟着修改。这种情况就称为"回调函数地狱"(callback hell)。

fs.readFile(fileA, 'utf-8', function (err, data) {
  fs.readFile(fileB, 'utf-8', function (err, data) {
    // ...
  });
});

Promise 对象就是为了解决这个问题而提出的。它不是新的语法功能,而是一种新的写法,允许将回调函数的嵌套,改成链式调用。采用 Promise,连续读取多个文件,写法如下。

var readFile = require('fs-readfile-promise');

readFile(fileA)
.then(function (data) {
  console.log(data.toString());
})
.then(function () {
  return readFile(fileB);
})
.then(function (data) {
  console.log(data.toString());
})
.catch(function (err) {
  console.log(err);
});

fs-readfile-promise模块,它的作用就是返回一个 Promise 版本的readFile函数。Promise 提供then方法加载回调函数,catch方法捕捉执行过程中抛出的错误。

可以看到,Promise 的写法只是回调函数的改进。Promise 的最大问题是代码冗余,原来的任务被 Promise 包装了一下,不管什么操作,一眼看去都是一堆then,原来的语义变得很不清楚。

Generator 函数

协程

"协程"(coroutine),意思是多个线程互相协作,完成异步任务。

协程有点像函数,又有点像线程。它的运行流程大致如下。

  • 第一步,协程A开始执行
  • 第二步,协程A执行到一半,进入暂停,执行权转移到协程B。
  • 第三步,(一段时间后)协程B交还执行权。
  • 第四步,协程A恢复执行。

读取文件的协程写法如下

function* asyncJob() {
  // ...其他代码
  var f = yield readFile(fileA);
  // ...其他代码
}

协程遇到yield命令就暂停,执行权将交给其他协程,等到执行权返回,再从暂停的地方继续往后执行。它的最大优点,就是代码的写法非常像同步操作,如果去除yield命令,简直一模一样。yield命令是异步两个阶段的分界线

协程的 Generator 函数实现

Generator 函数是协程在 ES6 的实现,最大特点就是可以交出函数的执行权(即暂停执行)。整个 Generator 函数就是一个封装的异步任务,或者说是异步任务的容器。异步操作需要暂停的地方,都用yield语句注明。

function* gen(x) {
  var y = yield x + 2;
  return y;
}

var g = gen(1);
g.next() // { value: 3, done: false }
g.next() // { value: undefined, done: true }

调用 Generator 函数,会返回一个内部指针(即遍历器)g。这是 Generator 函数不同于普通函数的另一个地方,即执行它不会返回结果,返回的是指针对象。调用指针g的next方法,会移动内部指针(即执行异步任务的第一段),指向第一个遇到的yield语句,上例是执行到x + 2为止。

换言之,next方法的作用是分阶段执行Generator函数。每次调用next方法,会返回一个对象,表示当前阶段的信息(value属性和done属性)。value属性是yield语句后面表达式的值,表示当前阶段的值;done属性是一个布尔值,表示 Generator 函数是否执行完毕,即是否还有下一个阶段。

Generator 函数的数据交换和错误处理

Generator 函数可以暂停执行和恢复执行,这是它能封装异步任务的根本原因。除此之外,它还有两个特性,使它可以作为异步编程的完整解决方案:函数体内外的数据交换和错误处理机制。

输出:next返回值的 value 属性,是 Generator 函数向外输出数据;

输入:next方法还可以接受参数,向 Generator 函数体内输入数据。输入值将赋值给上一个yield表达式,不传参即上一个yield表达式为undefined

Generator 函数内部还可以部署错误处理代码,捕获函数体外抛出的错误。

使用指针对象的throw方法抛出的错误,可以被函数体内的try...catch代码块捕获。这意味着,出错的代码与处理错误的代码,实现了时间和空间上的分离,这对于异步编程无疑是很重要的。

异步任务的封装

下面看看如何使用 Generator 函数,执行一个真实的异步任务。

var fetch = require('node-fetch');

function* gen(){
  var url = 'https://api.github.com/users/github';
  var result = yield fetch(url);
  console.log(result.bio);
}

var g = gen();
var result = g.next(); // fetch(url)返回一个promise

// 即result.value是一个promise
result.value.then(function(data){
  return data.json();
}).then(function(data){
  g.next(data);
});
// 第一个then 取到fetch(url)操作完成后的结果 并转换为json格式
// 第一个then函数又返回一个promise 再次调用then方法 将转化成json 的数据 通过next的参数传回 gen函数的 result
// 执行console.log(result.bio) 这里的result就是外面传进来的json化之后的数据

可以看到,虽然 Generator 函数将异步操作表示得很简洁,但是流程管理却不方便(即何时执行第一阶段、何时执行第二阶段)。

Thunk 函数

Thunk 函数是自动执行 Generator 函数的一种方法。

参数的求值策略

  • 传值调用:即在进入函数体之前,就计算参数的值,再将这个值传入函数。
  • 传名调用:即直接将表达式传入函数体,只在用到它的时候求值。

传值调用比较简单,但是对参数求值的时候,实际上还没用到这个参数,有可能造成性能损失。

编译器的“传名调用”实现,往往是将参数放到一个临时函数之中,再将这个临时函数传入函数体。这个临时函数就叫做 Thunk 函数。

function f(m) {
  return m * 2;
}

f(x + 5);

// 等同于

var thunk = function () {
  return x + 5;
};

function f(thunk) {
  return thunk() * 2;
}

这就是 Thunk 函数的定义,它是“传名调用”的一种实现策略,用来替换某个表达式。

JavaScript 语言的 Thunk 函数

在 JavaScript 语言中,Thunk 函数替换的不是表达式,而是多参数函数,将其替换成一个只接受回调函数作为参数的单参数函数。

// 正常版本的readFile(多参数版本)
fs.readFile(fileName, callback);

// Thunk版本的readFile(单参数版本)
var Thunk = function (fileName) {
  return function (callback) {
    return fs.readFile(fileName, callback);
  };
};

var readFileThunk = Thunk(fileName);
readFileThunk(callback);
// 这里的readFileThunk 就是一个thunk函数,只接受回调函数作为参数的单参数函数

但是这里的Thunk函数,只能处理fs.readFile的Thunk化,不能处理其他的。

任何函数,只要参数有回调函数,就能写成 Thunk 函数的形式。下面是一个简单的 Thunk 函数转换器。

const Thunk = function(fn) {
  return function (...args) {
    return function (callback) {
      return fn.call(this, ...args, callback);
    }
  };
};
// 再包一层,将fs.readFile这个函数,也直接当做参数传递进来

var readFileThunk = Thunk(fs.readFile);
// 这里的readFileThunk就相当于是上例中的Thunk
// readFileThunk(fileA) 返回一个thunk函数,即上例中的 readFileThunk
readFileThunk(fileA)(callback);

// 在参数有回调函数 上的使用

function f(a, cb) {
  cb(a);
}
const ft = Thunk(f);

ft(1)(console.log) // 1
// 这里ft(1)就是一个thunk函数

Thunkify 模块

生产环境的转换器,建议使用 Thunkify 模块,即使用成熟 Thunkify模块来代替上例中的简单Thunk转换器

安装: npm install thunkify

使用

var thunkify = require('thunkify');
var fs = require('fs');

var read = thunkify(fs.readFile);
read('package.json')(function(err, str){
  // ...
});

源码:主要多了一个检查机制,变量called确保回调函数只运行一次。

function thunkify(fn) {
  return function() {
    var args = new Array(arguments.length);
    var ctx = this;
    
    for (var i = 0; i < args.length; ++i) {
      args[i] = arguments[i];
    }
    // 这里的arg 针对上面使用过的来讲就是 ['package.json']
    return function (done) {
      // 这里的done就是 上面 read('package.json')后传入的回调
      var called;

      // 第一步:把done这个回调,再包一层,并设置called开关,确保done这个回调只执行一次
      // 这里的使用arg.push() 将一个包装后的函数加入args,并在之后一起传给fn
      args.push(function () {
        // 第三步:这个函数 就是 fs.readFile('package.json', cb)中的 cb
        // 在读取完成,就会执行这里的代码

        // 设置开关 让回调只执行一次
        if (called) return;
        called = true;

        // 这里的arguments 就是 [err, data] 传递给了回调函数并执行
        done.apply(null, arguments);
      });

      try {
        // 第二步:下面这行代码即相当于执行fs.readFile.apply(ctx, ['package.json', 包装后的函数])
        // 所以包装好的函数 就是 fs.readFile('package.json', cb)中的 cb
        fn.apply(ctx, args);
      } catch (err) {
        // 如果报错 把err对象传递给回调函数
        done(err);
      }
    }
  }
};

Generator 函数的流程管理

Thunk 函数有什么用?以前确实没什么用,但是 ES6 有了 Generator 函数,Thunk 函数现在可以用于 Generator 函数的自动流程管理。

Generator如何自动执行同步操作:

function* gen() {
  // ...
}

var g = gen();
var res = g.next();

while(!res.done){
  res = g.next();
}

关于异步操作。如果必须保证前一步执行完,才能执行后一步,上面的自动执行就不可行。这时,Thunk 函数就能派上用处。

var fs = require('fs');
var thunkify = require('thunkify');
var readFileThunk = thunkify(fs.readFile);

var gen = function* (){
  var r1 = yield readFileThunk('fileA');
  console.log(r1.toString());
  var r2 = yield readFileThunk('fileB');
  console.log(r2.toString());
};

// readFileThunk('fileA') 返回的就是一个thunk函数,接受一个回调函数作为参数
// 该回调最终也是fs.readFile('fileA',cb)中的cb

// 手动执行上面的gen函数 
var g = gen();

var r1 = g.next();
// r1.value就是一个thunk函数 因为readFileThunk('fileA') 返回的就是一个thunk函数。
// 所以可以接受一个回调作为参数,这个回调会在 读取完fileA后执行
r1.value(function (err, data) {
  if (err) throw err;
  var r2 = g.next(data);
  r2.value(function (err, data) {
    if (err) throw err;
    g.next(data);
  });
});

// 如果读取fileA报错就抛错
// 读取正常,就再将执行权交换给gen函数,并把读取后得到的data交给gen函数做读取后操作
// 即 gen函数中的r1 就是 读取fileA得到的data,这时候gen函数就像是同步执行的代码
// console.log(r1.toString())就相当于是文件读取后的操作
// 然后接着执行gen函数,会再次遇到yield,这时候又把执行权交出来
// 执行r2.value(cb),r2.value也是thunk ... 依次循环上面操作

yield命令用于将程序的执行权移出 Generator 函数,那么就需要一种方法,将执行权再交还给 Generator 函数。(手动执行就是调用g.next)

这种方法就是 Thunk 函数,因为它可以在回调函数里,将执行权交还给 Generator 函数。

使用thunk来自动执行 Generator 函数

核心就是在回调中将 执行权传入gen函数,并获取到上一个异步操作的thunk函数将回调传入,在上一个异步操作完成后会触发回调,如此反复交换执行权。

当然,前提是每一个异步操作,都要是 Thunk 函数,也就是说,跟在yield命令后面的必须是 Thunk 函数。

function run(fn) {
  var gen = fn();

  function cb(err, data) {
    if (err) throw err;
    var result = gen.next(data);
    if (result.done) return;
    result.value(cb);
  }

  cb();
}

function* g() {
  var f1 = yield readFileThunk('fileA');
  var f2 = yield readFileThunk('fileB');
  // ...
  var fn = yield readFileThunk('fileN');
}

run(g);

// 函数g封装了n个异步的读取文件操作,只要执行run函数,这些操作就会自动完成。
// 这样一来,异步操作不仅可以写得像同步操作,而且一行代码就可以执行。

co 模块

co 模块用于 Generator 函数的自动执行。co 模块可以让你不用编写 Generator 函数的执行器。

var gen = function* () {
  var f1 = yield readFile('/etc/fstab');
  var f2 = yield readFile('/etc/shells');
  console.log(f1.toString());
  console.log(f2.toString());
};

var co = require('co');
// Generator 函数只要传入co函数,就会自动执行。
co(gen).then(function (){
  console.log('Generator 函数执行完成');
});
// co函数返回一个Promise对象,因此可以用then方法添加回调函数。

Generator 就是一个异步操作的容器。它的自动执行需要一种机制,当异步操作有了结果,能够自动交回执行权。

两种方法可以做到这一点。

  • 回调函数。将异步操作包装成 Thunk 函数,在回调函数里面交回执行权。见:使用thunk来自动执行 Generator 函数
  • Promise 对象。将异步操作包装成 Promise 对象,用then方法交回执行权。见:基于 Promise 对象的自动执行

co 模块其实就是将两种自动执行器(Thunk 函数和 Promise 对象),包装成一个模块。使用 co 的前提条件是,Generator 函数的yield命令后面,只能是 Thunk 函数或 Promise 对象。如果数组或对象的成员,全部都是 Promise 对象,也可以使用 co。

基于 Promise 对象的自动执行

var fs = require('fs');

var readFile = function (fileName){
  return new Promise(function (resolve, reject){
    fs.readFile(fileName, function(error, data){
      if (error) return reject(error);
      resolve(data);
    });
  });
};

var gen = function* (){
  var f1 = yield readFile('/etc/fstab');
  var f2 = yield readFile('/etc/shells');
  console.log(f1.toString());
  console.log(f2.toString());
};

// 手动执行
var g = gen();

g.next().value.then(function(data){
  g.next(data).value.then(function(data){
    g.next(data);
  });
});

// g.next().value
// .then(data => {
//   return g.next(data).value
// }).then(data => {
//   g.next(data);
// })

手动执行其实就是用then方法,层层添加回调函数。理解了这一点,就可以写出一个自动执行器。

function run(gen){
  var g = gen();

  function next(data){
    var result = g.next(data);
    if (result.done) return result.value;
    result.value.then(function(data){
      next(data);
    });
  }

  next();
}

run(gen);

co 模块的源码

co 函数接受 Generator 函数作为参数,返回一个 Promise 对象。

function co(gen) {
  var ctx = this;

  return new Promise(function(resolve, reject) {
    // 先检查参数gen是否为 Generator 函数。如果是,就执行该函数,得到一个内部指针对象;
    // 如果不是就返回,并将 Promise 对象的状态改为resolved。
    if (typeof gen === 'function') gen = gen.call(ctx);
    if (!gen || typeof gen.next !== 'function') return resolve(gen);

    // co 将 Generator 函数的内部指针对象的next方法,包装成onFulfilled函数
    // 这主要是为了能够捕捉抛出的错误。
    onFulfilled();
    function onFulfilled(data) {
      var result;
      try {
        result = gen.next(data); // 启动gen函数的执行
      } catch (e) {
        return reject(e); // 如果错误就抛出
      }
      next(result);
    }

    // 关键的next函数,它会反复调用自身。
    function next(result) {
      // 检查当前是否为 Generator 函数的最后一步,如果是就返回
      if (result.done) return resolve(result.value);

      // 确保每一步的返回值,是 Promise 对象。
      var value = toPromise.call(ctx, result.value);

      // 使用then方法,为返回值加上回调函数,然后通过onFulfilled函数再次调用next函数。
      if (value && isPromise(value)) return value.then(onFulfilled, onRejected);

      // 上面的if为false时 执行下面代码
      // 即参数不符合要求,抛出错误
      return onRejected(
        new TypeError(
          'You may only yield a function, promise, generator, array, or object, '
          + 'but the following object was passed: "'
          + String(result.value)
          + '"'
        )
      );
    }
  });
}

处理并发的异步操作

co 支持并发的异步操作,即允许某些操作同时进行,等到它们全部完成,才进行下一步。(猜想使用Promise.all)

// 数组的写法
co(function* () {
  var res = yield [
    Promise.resolve(1),
    Promise.resolve(2)
  ];
  console.log(res);
}).catch(onerror);

// 对象的写法
co(function* () {
  var res = yield {
    1: Promise.resolve(1),
    2: Promise.resolve(2),
  };
  console.log(res);
}).catch(onerror);

// toPromise 可能会将这些异步操作转为数组传入Promise.all中

实例:处理 Stream

Node 提供 Stream 模式读写数据,特点是一次只处理数据的一部分,数据分成一块块依次处理,就好像“数据流”一样。这对于处理大规模数据非常有利。Stream 模式使用 EventEmitter API,会释放三个事件。

  • data事件:下一块数据块已经准备好了。
  • end事件:整个“数据流”处理完了。
  • error事件:发生错误。

使用Promise.race()函数,可以判断这三个事件之中哪一个最先发生,只有当data事件最先发生时,才进入下一个数据块的处理。从而,我们可以通过一个while循环,完成所有数据的读取。

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

const stream = fs.createReadStream('./les_miserables.txt');
let valjeanCount = 0;

co(function*() {
  while(true) {
    // 对于每个数据块都使用stream.once方法,在data、end、error三个事件上添加 一次性 回调函数。
    const res = yield Promise.race([
      new Promise(resolve => stream.once('data', resolve)),
      new Promise(resolve => stream.once('end', resolve)),
      new Promise((resolve, reject) => stream.once('error', reject))
    ]);
    // res只有在data事件发生时才有值
    // 只有data事件会在回调中传递参数(数据)给resolve,resolve作为回调函数即resolve(数据)
    // 所以在co模块中下一次g.next(data)中的data才有值,然后赋值给res, res才能为true。

    // end 事件中 回调事件没有参数
    // error事件 直接就抛错处理了
    if (!res) {
      break;
    }
    stream.removeAllListeners('data');
    stream.removeAllListeners('end');
    stream.removeAllListeners('error');
    valjeanCount += (res.toString().match(/valjean/ig) || []).length;
  }
  console.log('count:', valjeanCount); // count: 1120
});

这个函数就是用来读取 les_miserables.txt 中 valjean 出现了多少次。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,189评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,577评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,857评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,703评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,705评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,620评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,995评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,656评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,898评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,639评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,720评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,395评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,982评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,953评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,195评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,907评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,472评论 2 342

推荐阅读更多精彩内容