Generator 函数是协程在 ES6 的实现,最大特点就是可以交出函数的执行权(即暂停执行)。

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

  

上面代码就是一个 Generator 函数。它不同于普通函数,是可以暂停执行的,所以函数名之前要加星号,以示区别。

整个 Generator 函数就是一个封装的异步任务,或者说是异步任务的容器。异步操作需要暂停的地方,都用 yield 语句注明。Generator 函数的执行方法如下。

  1. var g = gen(1);
  2. g.next() // { value: 3, done: false }
  3. 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 函数体内输入数据。

  1. function* gen(x){
  2. var y = yield x + 2;
  3. return y;
  4. }
  5.  
  6. var g = gen(1);
  7. g.next() // { value: 3, done: false }
  8. g.next(2) // { value: 2, done: true }

  

上面代码中,第一个 next 方法的 value 属性,返回表达式 x + 2 的值(3)。第二个 next 方法带有参数2,这个参数可以传入 Generator 函数,作为上个阶段异步任务的返回结果,被函数体内的变量 y 接收。因此,这一步的 value 属性,返回的就是2(变量 y 的值)。

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

  1. function* gen(x){
  2. try {
  3. var y = yield x + 2;
  4. } catch (e){
  5. console.log(e);
  6. }
  7. return y;
  8. }
  9.  
  10. var g = gen(1);
  11. g.next();
  12. g.throw'出错了');
  13. // 出错了

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

Generator 函数的用法

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

  1. var fetch = require('node-fetch');
  2.  
  3. function* gen(){
  4. var url = 'https://api.github.com/users/github';
  5. var result = yield fetch(url);
  6. console.log(result.bio);
  7. }

  

上面代码中,Generator 函数封装了一个异步操作,该操作先读取一个远程接口,然后从 JSON 格式的数据解析信息。就像前面说过的,这段代码非常像同步操作,除了加上了 yield 命令。

执行这段代码的方法如下。

  1. var g = gen();
  2. var result = g.next();
  3.  
  4. result.value.then(function(data){
  5. return data.json();
  6. }).then(function(data){
  7. g.next(data);
  8. });

  

上面代码中,首先执行 Generator 函数,获取遍历器对象,然后使用 next 方法(第二行),执行异步任务的第一阶段。由于 Fetch返回的是一个 Promise 对象,因此要用 then 方法调用下一个next 方法。

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

Generator 函数的含义与用法的更多相关文章

  1. 转: ES6异步编程:Generator 函数的含义与用法

    转: ES6异步编程:Generator 函数的含义与用法 异步编程对 JavaScript 语言太重要.JavaScript 只有一根线程,如果没有异步编程,根本没法用,非卡死不可. 以前,异步编程 ...

  2. JS前端重点 -- Generator 函数的含义与用法

    Generator 函数的含义与用法 1.generator http://www.ruanyifeng.com/blog/2015/04/generator.html http://it.taocm ...

  3. async 函数的含义和用法

    Generator函数的含义与用法 Thunk函数的含义与用法 co函数库的含义与用法 async函数的含义与用法 一.终极解决 异步操作是 JavaScript 编程的麻烦事,麻烦到一直有人提出各种 ...

  4. 转: ES6异步编程:Thunk函数的含义与用法

    转: ES6异步编程:Thunk函数的含义与用法 参数的求值策略 Thunk函数早在上个世纪60年代就诞生了. 那时,编程语言刚刚起步,计算机学家还在研究,编译器怎么写比较好.一个争论的焦点是&quo ...

  5. opencv学习笔记——minMaxIdx函数的含义及用法

    opencv中有时需要对Mat数据需要对其中的数据求取最大值和最小值.opencv提供了直接的函数 CV_EXPORTS_W void minMaxLoc(InputArray src, CV_OUT ...

  6. 转: ES6异步编程: co函数库的含义与用法

    转: ES6异步编程: co函数库的含义与用法 co 函数库是著名程序员 TJ Holowaychuk 于2013年6月发布的一个小工具,用于 Generator 函数的自动执行. 比如,有一个 Ge ...

  7. ECMAScript 6 入门 ----Generator 函数

    本文转自:阮一峰老师的ECMAScript 6 入门,有时间可以看下评论! Generator 函数 简介 基本概念 Generator函数是ES6提供的一种异步编程解决方案,语法行为与传统函数完全不 ...

  8. JavaScript中的Generator函数

    1. 简介 Generator函数时ES6提供的一种异步编程解决方案.Generator语法行为和普通函数完全不同,我们可以把Generator理解为一个包含了多个内部状态的状态机. 执行Genera ...

  9. 16.Generator 函数的异步应用

    Generator 函数的异步应用 Generator 函数的异步应用 异步编程对 JavaScript 语言太重要.Javascript 语言的执行环境是"单线程"的,如果没有异 ...

随机推荐

  1. ThinkPHP跳转与重定向的区别在哪里

    跳转: 浏览器认为 : 当前 URL 请求成功 , 重新请求新的 URL . 浏览器会记录当前的 URL 和新的 URL 在请求历史记录中. 回退, 是可以回退到 , 当前的 URL 上的 . ( 无 ...

  2. WPF:MenuItem样式

    基础信息 1.MenuItem 样式 <Window.Resources> <Style TargetType="{x:Type MenuItem}"> & ...

  3. SURF

    推荐:http://www.cnblogs.com/tornadomeet/archive/2012/08/17/2644903.html SURF-Speeded Up Robust Feature ...

  4. 【转】解决svn Authorization failed错误

    转载地址:http://blog.sina.com.cn/s/blog_4b93170a0100leb2.html 出现该问题基本都是三个配置文件的问题,下面把这个文件列出来 svnserve.con ...

  5. yum mysql on centos 7

    参考:https://www.linode.com/docs/databases/mysql/how-to-install-mysql-on-centos-7 centos 7上没有办法使用yum i ...

  6. SharePoint自动化系列——Add/Remove "Record" from items

    转载请注明出自天外归云的博客园:http://www.cnblogs.com/LanTianYou/ 目的:批量的将SharePoint items变成records或者将records变成普通的it ...

  7. php获取前一天后一天,php时间函数操作

    <?php date_default_timezone_set('PRC'); //默认时区 echo "今天:",date("Y-m-d",time() ...

  8. 复旦大学2014--2015学年第一学期高等代数I期末考试情况分析

    一.期末考试成绩班级前几名 金羽佳(92).包振航(91).陈品翰(91).孙浩然(90).李卓凡(85).张钧瑞(84).郭昱君(84).董麒麟(84).张诚纯(84).叶瑜(84) 二.总成绩计算 ...

  9. zh-cn en-uk、zh-tw表示语言(文化)代码与国家地区对照表(最全的各国地区对照表)

    af 公用荷兰语 af-ZA 公用荷兰语 - 南非 sq 阿尔巴尼亚 sq-AL 阿尔巴尼亚 -阿尔巴尼亚 ar 阿拉伯语 ar-DZ 阿拉伯语 -阿尔及利亚 ar-BH 阿拉伯语 -巴林 ar-EG ...

  10. UVA 1351 十三 String Compression

    String Compression Time Limit:3000MS     Memory Limit:0KB     64bit IO Format:%lld & %llu Submit ...