<!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. 02.switch的使用

    基本语法: switch-case语法: switch(表达式/变量) { case 值1: 语句块1; break; case 值2: 语句块2; break; default:语句块3; brea ...

  2. web中的HTTP协议

    HTTP协议(HyperText Transfer Protocol 超文本传输协议),是浏览器接收web页面和发送web页面请求的标准协议.HTTP协议是基于TCP/IP协议的,版本号有Http1. ...

  3. 【Spring Boot】集成Netty Socket.IO通讯框架

    服务端 @Configuration public class NettySocketConfig { private static final Logger logger = LoggerFacto ...

  4. 标准c库函数和linux系统函数的关系

    c库IO函数的工作流程 c库函数与系统函数的关系 虚拟地址空间 文件描述符

  5. linux定时任务crontab的使用

    crond进程: crond是linux下用来周期性地执行某种任务的一个守护进程,安装操作系统默认会安装此服务工具,并且会自动启动crond进程. 设置定时任务过程: 1. 创建任务文件(.sh) [ ...

  6. 从零开始的全栈工程师——ajax

    AJAX AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX = Asynchronous JavaScript and XML. AJAX 是一种用于创建快速动态网页 ...

  7. 洛谷P1970 花匠(dp)

    题意 题目链接 Sol 直接用\(f[i][0/1]\)表示到第\(i\)个位置,该位置是以上升结尾还是以下降结尾 转移的时候只需枚举前一个即可 #include<cstdio> #inc ...

  8. 转：ArcGIS提取面状道路中心线（转载）

    1.首先把所有的面要素merge成一个要素 2.把merge后的数据转成线数据 3.此时转换后的线数据一定是闭合的,为了防止提取中心线失败(只提取出外围轮廓)我们在随意一个道路末端使用打断工具打一个开 ...

  9. Ruby系列文章之1---开发者应该熟悉的10个工具

    1. Git Git是进入Ruby这个生态圈首先最应该学会的工具.几乎所有以Ruby开发出来的套件都放在Github上.也就是不管你要下载或修改协作都需要透过Git. 2. RVM Ruby有很多种i ...

  10. asyncio标准库3 HTTP client example

    import aiohttp import asyncio import async_timeout async def fetch(session, url): async with async_t ...