首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

ES6 系列之 Generator 的自动执行的方法示例

Posted in Javascript onOctober 19, 2018

单个异步任务

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

首先执行 Generator 函数，获取遍历器对象。

然后使用 next 方法，执行异步任务的第一阶段，即 fetch(url)。

注意，由于 fetch(url) 会返回一个 Promise 对象，所以 result 的值为：

{ value: Promise { <pending> }, done: false }

最后我们为这个 Promise 对象添加一个 then 方法，先将其返回的数据格式化(data.json())，再调用 g.next，将获得的数据传进去，由此可以执行异步任务的第二阶段，代码执行完毕。

多个异步任务

上节我们只调用了一个接口，那如果我们调用了多个接口，使用了多个 yield，我们岂不是要在 then 函数中不断的嵌套下去……

所以我们来看看执行多个异步任务的情况：

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

function* gen() {
  var r1 = yield fetch('https://api.github.com/users/github');
  var r2 = yield fetch('https://api.github.com/users/github/followers');
  var r3 = yield fetch('https://api.github.com/users/github/repos');

  console.log([r1.bio, r2[0].login, r3[0].full_name].join('\n'));
}

为了获得最终的执行结果，你可能要写成：

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

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

但我知道你肯定不想写成这样……

其实，利用递归，我们可以这样写：

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

  function next(data) {
    var result = g.next(data);

    if (result.done) return;

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

  }

  next();
}

run(gen);

其中的关键就是 yield 的时候返回一个 Promise 对象，给这个 Promise 对象添加 then 方法，当异步操作成功时执行 then 中的 onFullfilled 函数，onFullfilled 函数中又去执行 g.next，从而让 Generator 继续执行，然后再返回一个 Promise，再在成功时执行 g.next，然后再返回……

启动器函数

在 run 这个启动器函数中，我们在 then 函数中将数据格式化 data.json()，但在更广泛的情况下，比如 yield 直接跟一个 Promise，而非一个 fetch 函数返回的 Promise，因为没有 json 方法，代码就会报错。所以为了更具备通用性，连同这个例子和启动器，我们修改为：

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

function* gen() {
  var r1 = yield fetch('https://api.github.com/users/github');
  var json1 = yield r1.json();
  var r2 = yield fetch('https://api.github.com/users/github/followers');
  var json2 = yield r2.json();
  var r3 = yield fetch('https://api.github.com/users/github/repos');
  var json3 = yield r3.json();

  console.log([json1.bio, json2[0].login, json3[0].full_name].join('\n'));
}

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

  function next(data) {
    var result = g.next(data);

    if (result.done) return;

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

  }

  next();
}

run(gen);

只要 yield 后跟着一个 Promise 对象，我们就可以利用这个 run 函数将 Generator 函数自动执行。

回调函数

yield 后一定要跟着一个 Promise 对象才能保证 Generator 的自动执行吗？如果只是一个回调函数呢？我们来看个例子：

首先我们来模拟一个普通的异步请求：

function fetchData(url, cb) {
  setTimeout(function(){
    cb({status: 200, data: url})
  }, 1000)
}

我们将这种函数改造成：

function fetchData(url) {
  return function(cb){
    setTimeout(function(){
      cb({status: 200, data: url})
    }, 1000)
  }
}

对于这样的 Generator 函数：

function* gen() {
  var r1 = yield fetchData('https://api.github.com/users/github');
  var r2 = yield fetchData('https://api.github.com/users/github/followers');

  console.log([r1.data, r2.data].join('\n'));
}

如果要获得最终的结果：

var g = gen();

var r1 = g.next();

r1.value(function(data) {
  var r2 = g.next(data);
  r2.value(function(data) {
    g.next(data);
  });
});

如果写成这样的话，我们会面临跟第一节同样的问题，那就是当使用多个 yield 时，代码会循环嵌套起来……

同样利用递归，所以我们可以将其改造为：

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

  function next(data) {
    var result = g.next(data);

    if (result.done) return;

    result.value(next);
  }

  next();
}

run(gen);

run

由此可以看到 Generator 函数的自动执行需要一种机制，即当异步操作有了结果，能够自动交回执行权。

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

（1）回调函数。将异步操作进行包装，暴露出回调函数，在回调函数里面交回执行权。

（2）Promise 对象。将异步操作包装成 Promise 对象，用 then 方法交回执行权。

在两种方法中，我们各写了一个 run 启动器函数，那我们能不能将这两种方式结合在一些，写一个通用的 run 函数呢？我们尝试一下：

// 第一版
function run(gen) {
  var gen = gen();

  function next(data) {
    var result = gen.next(data);
    if (result.done) return;

    if (isPromise(result.value)) {
      result.value.then(function(data) {
        next(data);
      });
    } else {
      result.value(next)
    }
  }

  next()
}

function isPromise(obj) {
  return 'function' == typeof obj.then;
}

module.exports = run;

其实实现的很简单，判断 result.value 是否是 Promise，是就添加 then 函数，不是就直接执行。

return Promise

我们已经写了一个不错的启动器函数，支持 yield 后跟回调函数或者 Promise 对象。

现在有一个问题需要思考，就是我们如何获得 Generator 函数的返回值呢？又如果 Generator 函数中出现了错误，就比如 fetch 了一个不存在的接口，这个错误该如何捕获呢？

这很容易让人想到 Promise，如果这个启动器函数返回一个 Promise，我们就可以给这个 Promise 对象添加 then 函数，当所有的异步操作执行成功后，我们执行 onFullfilled 函数，如果有任何失败，就执行 onRejected 函数。

我们写一版：

// 第二版
function run(gen) {
  var gen = gen();

  return new Promise(function(resolve, reject) {

    function next(data) {
      try {
        var result = gen.next(data);
      } catch (e) {
        return reject(e);
      }

      if (result.done) {
        return resolve(result.value)
      };

      var value = toPromise(result.value);

      value.then(function(data) {
        next(data);
      }, function(e) {
        reject(e)
      });
    }

    next()
  })

}

function isPromise(obj) {
  return 'function' == typeof obj.then;
}

function toPromise(obj) {
  if (isPromise(obj)) return obj;
  if ('function' == typeof obj) return thunkToPromise(obj);
  return obj;
}

function thunkToPromise(fn) {
  return new Promise(function(resolve, reject) {
    fn(function(err, res) {
      if (err) return reject(err);
      resolve(res);
    });
  });
}

module.exports = run;

与第一版有很大的不同：

首先，我们返回了一个 Promise，当 result.done 为 true 的时候，我们将该值 resolve(result.value)，如果执行的过程中出现错误，被 catch 住，我们会将原因 reject(e)。

其次，我们会使用 thunkToPromise 将回调函数包装成一个 Promise，然后统一的添加 then 函数。在这里值得注意的是，在 thunkToPromise 函数中，我们遵循了 error first 的原则，这意味着当我们处理回调函数的情况时：

// 模拟数据请求
function fetchData(url) {
  return function(cb) {
    setTimeout(function() {
      cb(null, { status: 200, data: url })
    }, 1000)
  }
}

在成功时，第一个参数应该返回 null，表示没有错误原因。

优化

我们在第二版的基础上将代码写的更加简洁优雅一点，最终的代码如下：

// 第三版
function run(gen) {

  return new Promise(function(resolve, reject) {
    if (typeof gen == 'function') gen = gen();

    // 如果 gen 不是一个迭代器
    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);
    }

    function onRejected(err) {
      var ret;
      try {
        ret = gen.throw(err);
      } catch (e) {
        return reject(e);
      }
      next(ret);
    }

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

function isPromise(obj) {
  return 'function' == typeof obj.then;
}

function toPromise(obj) {
  if (isPromise(obj)) return obj;
  if ('function' == typeof obj) return thunkToPromise(obj);
  return obj;
}

function thunkToPromise(fn) {
  return new Promise(function(resolve, reject) {
    fn(function(err, res) {
      if (err) return reject(err);
      resolve(res);
    });
  });
}

module.exports = run;

co

如果我们再将这个启动器函数写的完善一些，我们就相当于写了一个 co，实际上，上面的代码确实是来自于 co……

而 co 是什么？ co 是大神 TJ Holowaychuk 于 2013 年 6 月发布的一个小模块，用于 Generator 函数的自动执行。

如果直接使用 co 模块，这两种不同的例子可以简写为：

// yield 后是一个 Promise
var fetch = require('node-fetch');
var co = require('co');

function* gen() {
  var r1 = yield fetch('https://api.github.com/users/github');
  var json1 = yield r1.json();
  var r2 = yield fetch('https://api.github.com/users/github/followers');
  var json2 = yield r2.json();
  var r3 = yield fetch('https://api.github.com/users/github/repos');
  var json3 = yield r3.json();

  console.log([json1.bio, json2[0].login, json3[0].full_name].join('\n'));
}

co(gen);
// yield 后是一个回调函数
var co = require('co');

function fetchData(url) {
  return function(cb) {
    setTimeout(function() {
      cb(null, { status: 200, data: url })
    }, 1000)
  }
}

function* gen() {
  var r1 = yield fetchData('https://api.github.com/users/github');
  var r2 = yield fetchData('https://api.github.com/users/github/followers');

  console.log([r1.data, r2.data].join('\n'));
}

co(gen);

是不是特别的好用？

ES6 系列

ES6 系列目录地址：https://github.com/mqyqingfeng/Blog

ES6 系列预计写二十篇左右，旨在加深 ES6 部分知识点的理解，重点讲解块级作用域、标签模板、箭头函数、Symbol、Set、Map 以及 Promise 的模拟实现、模块加载方案、异步处理等内容。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

ES6 系列之 Generator 的自动执行的方法示例

- Author -

?暧

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
通过复制Table生成word和excel的javascript代码
Jan 20 Javascript
jQuery实现输入框下拉列表树插件特效代码分享
Aug 27 Javascript
jquery衣服颜色选取插件效果代码分享
Aug 28 Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
Jun 12 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
Jun 13 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
Mar 09 Javascript
单击按钮发送验证码,出现倒计时的简单实例
Mar 17 Javascript
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
May 24 Javascript
node.js利用mongoose获取mongodb数据的格式化问题详解
Oct 06 Javascript
浅谈vue中改elementUI默认样式引发的static与assets的区别
Feb 03 Javascript
JavaScript数组特性与实践应用深入详解
Dec 30 Javascript
vue-cli 3 全局过滤器的实例代码详解
Jun 03 Javascript
js中自定义react数据验证组件实例详解
Oct 19 #Javascript
值得收藏的八个常用的js正则表达式
Oct 19 #Javascript
深入理解移动前端开发之viewport
Oct 19 #Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
Oct 19 #Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
Oct 18 #Javascript
vue中v-for循环给标签属性赋值的方法
Oct 18 #Javascript
webstorm+vue初始化项目的方法
Oct 18 #Javascript
二维数组(2) 网页解析(1) bs4(1) translation(2) 查找算法(1) 分块(1) 装饰器(1) decorator(1) 循环(3) 读取(1)
You might like
php网上商城购物车设计代码分享
2012/02/15 PHP
php控制linux服务器常用功能 关机 重启 开新站点等
2012/09/05 PHP
探讨PHP使用eAccelerator的API开发详解
2013/06/09 PHP
PHP实现删除字符串中任何字符的函数
2015/08/11 PHP
浅析PHP开发规范
2018/02/05 PHP
关于laravel后台模板laravel-admin select框的使用详解
2019/10/03 PHP
DWZ table的原生分页浅谈
2013/03/01 Javascript
含有CKEditor的表单如何提交
2014/01/09 Javascript
node.js实现多图片上传实例
2014/06/03 Javascript
改变状态栏文字的js代码
2014/06/13 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
2015/01/26 Javascript
js全选实现和判断是否有复选框选中的方法
2015/02/17 Javascript
JS获取元素多层嵌套思路详解
2016/05/16 Javascript
JS hashMap实例详解
2016/05/26 Javascript
Jquery Easyui验证组件ValidateBox使用详解（20）
2016/12/18 Javascript
angularJs的ng-class切换class
2017/06/23 Javascript
JavaScript 保护变量不被随意修改的实现代码
2017/09/27 Javascript
浅谈angular4.0中路由传递参数、获取参数最nice的写法
2018/03/12 Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
2019/01/18 jQuery
python实现将元祖转换成数组的方法
2015/05/04 Python
python连接数据库的方法
2017/10/19 Python
修复 Django migration 时遇到的问题解决
2018/06/14 Python
Linux 修改Python命令的方法示例
2018/12/03 Python
Python之NumPy(axis=0 与axis=1)区分详解
2019/05/27 Python
django 多数据库及分库实现方式
2020/04/01 Python
Python爬取网页信息的示例
2020/09/24 Python
法国一家多品牌成衣精品中/高档商店：Graduate Store
2019/08/28 全球购物
软件生产职位结构化面试主要考察要素及面试题库
2015/06/12 面试题
恒华伟业笔试面试题
2015/02/26 面试题
市场部业务员岗位职责
2014/04/02 职场文书
捐助倡议书范文
2014/04/15 职场文书
继承权公证书范本
2015/01/23 职场文书
财务工作个人总结
2015/02/27 职场文书
质量承诺书格式范文
2015/04/28 职场文书
使用Python的开发框架Brownie部署以太坊智能合约
2021/05/28 Python
Javascript 解构赋值详情
2021/11/17 Javascript