<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>generator-next</title>

 </head>

 <body>

     <h3>理解 ES6 Generator-next() 方法</h3>

     <script>

         window.onload = function() {

             // Generator 异步任务封装

             // 例-1

             function* gene() {

                 // mark_1

                 let url = 'https://api.github.com/';

                 let result = yield myAjax(url, 'get', null, successCallBack, failCallBack);

                 // mark_2

                 let jsRelt = JSON.parse(result);

                 console.log('调用第二个 next 后, result 才等于 data: ', jsRelt['current_user_url']);

                 yield 'end';

                 // mark_3

             }

             let gn = gene(); // 返回一个遍历器对象 gn

             let first_next = gn.next(); // 调用第一个 next 方法: 启动遍历器, 执行 mark_1 ~ mark_2 之间的代码

             console.log('调用第一个 next 后: ', first_next); // 因为异步, first-next: {value: undefined, done: false}

             // ajax 成功的回调函数

             function successCallBack(data) {

                 console.log('request-successful: !'/*, data*/);

                 // * relt = gn.next(data) 说明:

                 // * 1. 此处调用第二个 next 方法: 执行 mark_2 ~ mark_3 之间的代码, 返回的对象 relt = {value: "end", done: false}

                 // * 2. yield 'end'; 是同步操作, 所以调用第二个 next 方法后 relt.value 马上等于 yield 后面表达式的结果("end"),

                 // *     不信注释掉第三个 gn.next() 看结果),

                 // *     如果 yield 后面跟的是异步操作, 则需调用下一个 next 方法 relt.value 才有值.

                 let relt = gn.next(data);

                 console.log('同步操作, relt 立马有值: ', relt);

                 // 已经遍历完所有的 yield 语句, 无论再调用多少个 next() 方法都返回 {value: undefined, done: true}

                 console.log('调用第三个 next 返回的对象: ', gn.next() /*第三个next()方法*/);

             }

             // ajax 失败的回调函数

             function failCallBack(err) {

                 console.log('request-failed: ', err);

             }

             /*

                 // 例-2

                 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() 总说明:

             * 1. 按照 《ES6 标准入门(第3版)》阮一峰 著 第 323 页内容，总结 next() 方法。

             *   1.1 next(param) 方法的参数 param 表示上一条含 yield 关键字的语句中，yield 后面表达式的结果，

                     例-1 中，第一条含 yield 关键字的语句中因为没有其他表达式组合成更复杂的表达式了，所以 myAjax(...args) 中返回的 data 就等于 result;

             * 2. 注意, gn.next() 返回的是一个对象, 其中的 value 属性的值等于其刚执行完的含 yield 关键字的语句 yield 后面的表达式的结果,

                  如果这个表达式是同步操作, 那返回的对象中 value 立马有值, 如果是异步操作, 则 value 首先是 undefined, 异步执行完后才有值.

             * 3. 执行的代码顺序: 调用第一个 next() 执行 mark_1 ~ mark_2 之间的代码,

                  第二个 next() 执行的是 mark_2 ~ mark_3 之间的代码, 以此类推;

             * 4. 例-2 作为参考, 摘自《ES6 标准入门(第3版)》阮一峰 著 第 360 页内容.

             *

             */

         }

         // ------------ function -------------

         // 自定义 ajax, 类型仅限于 get 和 post, 回调函数: success/error

         function myAjax(url, type, params, success, error) {

             var xhr = null;

             var args = null;

             xhr = new XMLHttpRequest();

             xhr.onreadystatechange = function() {

                 if (xhr.readyState == 4) {

                     if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {

                         success(xhr.responseText);

                     } else {

                         error("Request was unsuccessful: "+ xhr.status);

                     }

                 }

             };

             xhr.open(type, url, true); // 类型, 连接, 是否异步

             if (type.toLowerCase() == 'post') {

                 // xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // 默认的表单提交

                 xhr.setRequestHeader("Content-Type", "application/json; charset=UTF-8"); // JSON.stringify 处理后的json 键值对

                 args = params;

             }

             xhr.send(args);

         }

     </script>

 </body>

 </html>

理解 ES6 Generator-next()方法的更多相关文章

  1. ES6 generator 基础

    参考文档 harmony:generators Generator是ES6的新特性,通过yield关键字,可以让函数的执行流挂起,那么便为改变执行流程提供了可能. 创建Generator functi ...

  2. es6的map()方法解释

    es6的map()方法解释   map方法的作用不难理解,即“映射”,也就是原数组被“映射”成对应新数组.下面这个例子是数值项求平方: var data = [1, 2, 3, 4]; var arr ...

  3. 前端知识体系：JavaScript基础-原型和原型链-理解 es6 中class构造以及继承的底层实现原理

    理解 es6 中class构造以及继承的底层实现原理 原文链接:https://blog.csdn.net/qq_34149805/article/details/86105123 1.ES6 cla ...

  4. es6 generator函数的异步编程

    es6 generator函数,我们都知道asycn和await是generator函数的语法糖,那么genertaor怎么样才能实现asycn和await的功能呢? 1.thunk函数    将函数 ...

  5. 深度理解Jquery 中 offset() 方法

    参考原文:深度理解Jquery 中 offset() 方法

  6. React与ES6（三）ES6类和方法绑定

    React与ES6系列: React与ES6(一)开篇介绍 React和ES6(二)ES6的类和ES7的property initializer React与ES6(三)ES6类和方法绑定 React ...

  7. 看es6 字符串新方法有感

    'x'.repeat(3) // "xxx" 'hello'.repeat(2) // "hellohello" 'na'.repeat(0) // " ...

  8. ES6新增对象方法的访问描述符：get(只读)、set(只写)

    Es6新增对象方法的访问描述符:get(只读).set(只写),可以直接使用,一般用于数据监听,用途类似于vue.$watch. var obj = { a:1, get bar() { return ...

  9. es6数组的方法

    1.复习的函数 函数是由关键字function声明的,他是一个引用数据类型,是Function的实例,在调用的时候会开辟一个私有空间 2.函数的成员 arguments:null  (是实参构成的数组 ...

随机推荐

  1. pwn 题GDB调试技巧和exp模板

    GDB分析ELF文件常用的调试技巧 gdb常用命令 首先是gbd+文件名 静态调试 ,gdb attach +文件名 动态调试 为了方便查看堆栈和寄存器 最好是安装peda插件 安装 可以通过pip直 ...

  2. Django——admin管理工具

    一.admin组件使用 Django 提供了基于 web 的管理工具. Django 自动管理工具是 django.contrib 的一部分.你可以在项目的 settings.py 中的 INSTAL ...

  3. Html5的localStorage与sessionStorage五种循序渐进的使用方法

    需求:本地记录用户上次输入的内容 使用关键技术:localStorage 第一步:使用jQuery的普通写法 1.JS代码 // 获取window的localStorage对象 var localS ...

  4. 原生js简单实现拖拽效果

    实现弹窗拖拽效果的原理是:按下鼠标并移动——拖拽移动物体,抬起鼠标——停止移动.主要触发三个事件:onmousedown.onmousemove以及onmouseup: 首先搭建结构:一个宽350px ...

  5. .NET开源工作流RoadFlow-表单设计-单选按钮组

    单选按钮组即:<input type='checkbox'/>控件: 绑定字段:与数据表的某个字段绑定. 数据源: 1.数据字典:在下面字段项中选择对应在数据字典项. 2.自定义:自己输入 ...

  6. Deep Transfer Network: Unsupervised Domain Adaptation

    转自:http://blog.csdn.net/mao_xiao_feng/article/details/54426101 一.Domain adaptation 在开始介绍之前,首先我们需要知道D ...

  7. win7+jdk1.6+solr4.7.2在内嵌jetty servelt或外置tocmat服务器的solr服务使用

        solr安装,目前初步接触solr,了解两种启动方式.一种是自带的jetty,另一种是基于tomcat.由于超过4.7.2版本的solr需要java1.7及以上版本的支持,所以我们选择solr ...

  8. Python tqdm show progress bar

    tqdm can help to show a smart progress bar, and it is very easy to use, just wrap any iterable with  ...

  9. 【Leetcode】【Easy】Pascal's Triangle

    Given numRows, generate the first numRows of Pascal's triangle. For example, given numRows = 5,Retur ...

  10. 【Spring实战】—— 1 入门讲解

    这个系列是学习spring实战的总结,一方面总结书中所写的精髓,另一方面总结一下自己的感想. 基础部分讲解了spring最为熟知的几个功能:依赖注入/控制反转 和 面向切面编程. 这两个就不再多说了, ...