Generator函數異步應用以及構建自執行流程

時間  2020-02-19
標籤 generator 函數 異步 應用 以及 構建 執行 流程 简体版
原文   原文鏈接

異步基本概念

所謂"異步"，簡單說就是一個任務不是連續完成的，能夠理解成該任務被人爲分紅兩段，先執行第一段，而後轉而執行其餘任務，等作好了準備，再回過頭執行第二段。node

好比，有一個任務是讀取文件進行處理，任務的第一段是向操做系統發出請求，要求讀取文件。而後，程序執行其餘任務，等到操做系統返回文件，再接着執行任務的第二段（處理文件）。這種不連續的執行，就叫作異步。git

在JavaScript中處理異步傳統方法是回調函數和Promise，如今多了一種方式：就是Generator函數。固然，Async函數是Generator的語法糖，也能夠處理異步。github

Generator函數

協程

傳統的編程語言，早有異步編程的解決方案（實際上是多任務的解決方案）。其中有一種叫作"協程"（coroutine），意思是多個線程互相協做，完成異步任務。shell

協程有點像函數，又有點像線程。它的運行流程大體以下：編程

  • 第一步，協程A開始執行。
  • 第二步，協程A執行到一半，進入暫停，執行權轉移到協程B。
  • 第三步，（一段時間後）協程B交還執行權。
  • 第四步，協程A恢復執行。

上面流程的協程A，就是異步任務，由於它分紅兩段（或多段）執行。json

舉例來講，讀取文件的協程寫法以下：api

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

上面代碼的函數asyncJob是一個協程，它的奧妙就在其中的yield命令。它表示執行到此處，執行權將交給其餘協程。也就是說，yield命令是異步兩個階段的分界線。數組

協程遇到yield命令就暫停，等到執行權返回，再從暫停的地方繼續日後執行。它的最大優勢，就是代碼的寫法很是像同步操做，若是去除yield命令，簡直如出一轍。promise

協程的 Generator 函數實現

Generator 函數是協程在ES6的實現，最大特色就是能夠交出函數的執行權（即暫停執行）。併發

整個Generator函數就是一個封裝的異步任務，或者說是異步任務的容器。異步操做須要暫停的地方，都用yield語句註明。

Generator 函數的數據交換和錯誤處理

Generator 函數能夠暫停執行和恢復執行，這是它能封裝異步任務的根本緣由。除此以外，它還有兩個特性，使它能夠做爲異步編程的完整解決方案：函數體內外的數據交換和錯誤處理機制。

next返回值的value屬性，是 Generator 函數向外輸出數據；next方法還能夠接受參數，向 Generator 函數體內輸入數據。

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

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

Generator 函數內部還能夠部署錯誤處理代碼，捕獲函數體外拋出的錯誤。

function* gen(x){
  try {
    var y = yield x + 2;
  } catch (e){
    console.log(e);
  }
  return y;
}

var g = gen(1);
g.next();
g.throw('出錯了');
// 出錯了

異步任務的封裝

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();

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

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);

上面代碼中，fs模塊的readFile方法是一個多參數函數，兩個參數分別爲文件名和回調函數。通過轉換器處理，它變成了一個單參數函數，只接受回調函數做爲參數。這個單參數版本，就叫作 Thunk 函數。

任何函數，只要參數有回調函數，就能寫成 Thunk 函數的形式。下面是一個簡單的Thunk函數轉換器：

// ES5版本
var Thunk = function(fn){
  return function (){
    var args = Array.prototype.slice.call(arguments);
    return function (callback){
      args.push(callback);
      return fn.apply(this, args);
    }
  };
};

// ES6版本
const Thunk = function(fn) {
  return function (...args) {
    return function (callback) {
      return fn.call(this, ...args, callback);
    }
  };
};

使用上面的轉換器，生成fs.readFile的 Thunk 函數：

var readFileThunk = Thunk(fs.readFile);
readFileThunk(fileA)(callback);

Thunkify 模塊

生產環境的轉換器，使用方式以下：

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

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

Thunkify 的源碼與上面那個簡單的轉換器很是像：

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];
    }

    return function (done) {
      var called;

      args.push(function () {
        if (called) return;//多了一個檢查機制，變量called確保回調函數只運行一次。
        called = true;
        done.apply(null, arguments);
      });

      try {
        fn.apply(ctx, args);
      } catch (err) {
        done(err);
      }
    }
  }
};

Generator 函數的流程管理

Thunk 函數能夠用於Generator函數的自動流程管理。

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

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

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

上面代碼中，Generator函數gen會自動執行完全部步驟。

可是，這不適合異步操做。若是必須保證前一步執行完，才能執行後一步，上面的自動執行就不可行。這時，Thunk函數就能派上用處。以讀取文件爲例：

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

var gen = function* (){
  var r1 = yield readFileThunk('/etc/fstab');
  console.log(r1.toString());
  var r2 = yield readFileThunk('/etc/shells');
  console.log(r2.toString());
};

上面代碼中，yield命令用於將程序的執行權移出 Generator 函數，那麼就須要一種方法，將執行權再交還給 Generator 函數。

這種方法就是Thunk函數，它能夠在回調函數裏，將執行權交還給Generator函數。爲了便於理解，咱們先看如何手動執行上面這個 Generator 函數：

var g = gen();

var r1 = g.next();
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);
  });
});

仔細查看上面的代碼，能夠發現 Generator 函數的執行過程，實際上是將同一個回調函數，反覆傳入next方法的value屬性。這使得咱們能夠用遞歸來自動完成這個過程。

Thunk 函數的自動流程管理

Thunk 函數真正的威力，在於能夠自動執行 Generator 函數。下面就是一個基於 Thunk 函數的 Generator 執行器：

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

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

  next();
}

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

run(g);

上面代碼的run函數，就是一個 Generator 函數的自動執行器。內部的next函數就是 Thunk 的回調函數。next函數先將指針移到 Generator 函數的下一步（gen.next方法），而後判斷 Generator 函數是否結束（result.done屬性），若是沒結束，就將next函數再傳入 Thunk 函數（result.value屬性），不然就直接退出。

有了這個執行器，執行 Generator 函數方便多了。無論內部有多少個異步操做，直接把 Generator 函數傳入run函數便可。固然，前提是每個異步操做，都要是 Thunk 函數，也就是說，跟在yield命令後面的必須是 Thunk 函數。

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

run(g);

上面代碼中，函數g封裝了n個異步的讀取文件操做，只要執行run函數，這些操做就會自動完成。這樣一來，異步操做不只能夠寫得像同步操做，並且一行代碼就能夠執行。

Thunk 函數並非Generator函數自動執行的惟一方案。由於自動執行的關鍵是，必須有一種機制，自動控制 Generator函數的流程，接收和交還程序的執行權。回調函數能夠作到這一點，Promise 對象也能夠作到這一點。

co 模塊

基本用法

co 模塊可讓你不用編寫Generator函數的執行器，它會自動執行Generator函數。

var co = require('co');
co(gen);

上面代碼中，Generator函數只要傳入co函數，就會自動執行，co函數返回一個Promise對象。

co(gen).then(function (){
  console.log('Generator 函數執行完成');
});

上面代碼中，等到Generator函數執行結束，就會輸出一行提示。

co 模塊的原理

爲何 co 能夠自動執行 Generator 函數？

前面說過，Generator 就是一個異步操做的容器。它的自動執行須要一種機制，當異步操做有告終果，可以自動交回執行權。

兩種方法能夠作到這一點：

  • 回調函數。將異步操做包裝成 Thunk 函數，在回調函數裏面交回執行權。
  • Promise 對象。將異步操做包裝成 Promise 對象，用then方法交回執行權。

co 模塊其實就是將兩種自動執行器（Thunk函數和 Promise 對象），包裝成一個模塊。使用 co 的前提條件是，Generator函數的yield命令後面，只能是 Thunk函數或Promise對象。若是數組或對象的成員，所有都是 Promise 對象，也可使用 co，詳見後文的例子。

基於 Promise 對象的自動執行

沿用上面的例子，把fs模塊的readFile方法包裝成一個 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());
};

而後，手動執行上面的 Generator 函數：

var g = gen();

g.next().value.then(function(data){
  g.next(data).value.then(function(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 就是上面那個自動執行器的擴展，它的源碼只有幾十行，很是簡單。

首先，co 函數接受 Generator 函數做爲參數，返回一個 Promise 對象。

function co(gen) {
  var ctx = this;

  return new Promise(function(resolve, reject) {
  });
}

在返回的 Promise 對象裏面，co 先檢查參數gen是否爲 Generator 函數。若是是，就執行該函數，獲得一個內部指針對象；若是不是就返回，並將 Promise 對象的狀態改成resolved。

function co(gen) {
  var ctx = this;

  return new Promise(function(resolve, reject) {
    if (typeof gen === 'function') gen = gen.call(ctx);
    if (!gen || typeof gen.next !== 'function') return resolve(gen);
  });
}

接着，co 將 Generator 函數的內部指針對象的next方法，包裝成onFulfilled函數。這主要是爲了可以捕捉拋出的錯誤。

function co(gen) {
  var ctx = this;

  return new Promise(function(resolve, reject) {
    if (typeof gen === 'function') gen = gen.call(ctx);
    if (!gen || typeof gen.next !== 'function') return resolve(gen);

    onFulfilled();
    function onFulfilled(res) {
      var ret;
      try {
        ret = gen.next(res);
      } catch (e) {
        return reject(e);
      }
      next(ret);
    }
  });
}

最後，就是關鍵的next函數，它會反覆調用自身。

function next(ret) {
  if (ret.done) return resolve(ret.value);
  var value = toPromise.call(ctx, ret.value);
  if (value && isPromise(value)) return value.then(onFulfilled, onRejected);
  return onRejected(
    new TypeError(
      'You may only yield a function, promise, generator, array, or object, '
      + 'but the following object was passed: "'
      + String(ret.value)
      + '"'
    )
  );
}

上面代碼中，next函數的內部代碼，一共只有四行命令。

第一行，檢查當前是否爲 Generator 函數的最後一步，若是是就返回。

第二行，確保每一步的返回值，是 Promise 對象。

第三行，使用then方法，爲返回值加上回調函數，而後經過onFulfilled函數再次調用next函數。

第四行，在參數不符合要求的狀況下（參數非 Thunk 函數和 Promise 對象），將 Promise 對象的狀態改成rejected，從而終止執行。

處理併發的異步操做

co 支持併發的異步操做，即容許某些操做同時進行，等到它們所有完成，才進行下一步。

這時，要把併發的操做都放在數組或對象裏面，跟在yield語句後面。

// 數組的寫法
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);

下面是另外一個例子。

co(function* () {
  var values = [n1, n2, n3];
  yield values.map(somethingAsync);
});

function* somethingAsync(x) {
  // do something async
  return y
}

上面的代碼容許併發三個somethingAsync異步操做，等到它們所有完成，纔會進行下一步。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程