ES6参考---Generator函数
一、总结
一句话总结：
Generator函数和promise一样，也是用来做异步的，也是状态机的方式实现异步，只不过是通过遍历器iterator加yield（暂停）实现的
1、Generator函数的作用是什么？
Generator函数和promise一样，也是用来做异步的，也是状态机的方式实现异步，只不过是通过遍历器iterator加yield（暂停）实现的
2、怎么判断一个函数是不是Generator函数？
Generator函数的 function与函数名之间有一个星号
3、Generator函数 介绍？
1、Generator函数是ES6提供的解决异步编程的方案之一
2、Generator函数是一个状态机，内部封装了不同状态的数据，
3、Generator函数用来生成遍历器对象
4、Generator函数是可暂停函数(惰性求值), yield可暂停，next方法可启动。每次返回的是yield后的表达式结果
4、Generator函数 特点？
a、Generator内部用yield表达式来定义不同的状态
b、调用next方法函数内部逻辑开始执行，遇到yield表达式停止，返回{value: yield后的表达式结果/undefined, done: false/true}
c、再次调用next方法会从上一次停止时的yield处开始，直到最后
d、yield语句返回结果通常为undefined， 当调用next方法时传参内容会作为启动时yield语句的返回值。
5、Generator函数 ajax异步实例？
*、yield后接ajax：let url = yield getNews('http://localhost:3000/news?newsId=2');
*、Generator函数对象执行next方法：sx.next();
/* * 需求： * 1、发送ajax请求获取新闻内容 * 2、新闻内容获取成功后再次发送请求，获取对应的新闻评论内容 * 3、新闻内容获取失败则不需要再次发送请求。 * * */ function* sendXml() { // url为next传参进来的数据 let url = yield getNews('http://localhost:3000/news?newsId=2'); yield getNews(url); } function getNews(url) { $.get(url, function (data) { console.log(data); let commentsUrl = data.commentsUrl; let url = 'http://localhost:3000' + commentsUrl; // 当获取新闻内容成功，发送请求获取对应的评论内容 // 调用next传参会作为上次暂停是yield的返回值 sx.next(url); }) } let sx = sendXml(); // 发送请求获取新闻内容 sx.next();
二、Generator函数
博客对应课程的视频位置：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Generator函数</title> 6 </head> 7 <body> 8 9 <!-- 10 Generator函数 11 概念： 12 1、ES6提供的解决异步编程的方案之一 13 2、Generator函数是一个状态机，内部封装了不同状态的数据， 14 3、用来生成遍历器对象 15 4、可暂停函数(惰性求值), yield可暂停，next方法可启动。每次返回的是yield后的表达式结果 16 特点： 17 1、function 与函数名之间有一个星号 18 2、内部用yield表达式来定义不同的状态 19 例如： 20 function* generatorExample(){ 21 let result = yield 'hello'; // 状态值为hello 22 yield 'generator'; // 状态值为generator 23 } 24 3、generator函数返回的是指针对象(接11章节里iterator)，而不会执行函数内部逻辑 25 4、调用next方法函数内部逻辑开始执行，遇到yield表达式停止，返回{value: yield后的表达式结果/undefined, done: false/true} 26 5、再次调用next方法会从上一次停止时的yield处开始，直到最后 27 6、yield语句返回结果通常为undefined， 当调用next方法时传参内容会作为启动时yield语句的返回值。 28 --> 29 <script type="text/javascript" src="./js/jquery-1.10.1.min.js"></script> 30 <script type="text/javascript"> 31 // 小试牛刀 32 function* generatorTest() { 33 console.log('函数开始执行'); 34 yield 'hello'; 35 console.log('函数暂停后再次启动'); 36 yield 'generator'; 37 } 38 // 生成遍历器对象 39 let Gt = generatorTest(); 40 // 执行函数，遇到yield后即暂停 41 console.log(Gt); // 遍历器对象 42 let result = Gt.next(); // 函数执行,遇到yield暂停 43 console.log(result); // {value: "hello", done: false} 44 result = Gt.next(); // 函数再次启动 45 console.log(result); // {value: 'generator', done: false} 46 result = Gt.next(); 47 console.log(result); // {value: undefined, done: true}表示函数内部状态已经遍历完毕 48 49 // 对象的Symbol.iterator属性; 50 let myIterable = {}; 51 myIterable[Symbol.iterator] = function* () { 52 yield 1; 53 yield 2; 54 yield 4; 55 }; 56 for(let i of myIterable){ 57 console.log(i); 58 } 59 let obj = [...myIterable]; 60 console.log(obj); 61 62 console.log('-------------------------------'); 63 // 案例练习 64 /* 65 * 需求： 66 * 1、发送ajax请求获取新闻内容 67 * 2、新闻内容获取成功后再次发送请求，获取对应的新闻评论内容 68 * 3、新闻内容获取失败则不需要再次发送请求。 69 * 70 * */ 71 function* sendXml() { 72 // url为next传参进来的数据 73 let url = yield getNews('http://localhost:3000/news?newsId=2'); 74 yield getNews(url); 75 } 76 function getNews(url) { 77 $.get(url, function (data) { 78 console.log(data); 79 let commentsUrl = data.commentsUrl; 80 let url = 'http://localhost:3000' + commentsUrl; 81 // 当获取新闻内容成功，发送请求获取对应的评论内容 82 // 调用next传参会作为上次暂停是yield的返回值 83 sx.next(url); 84 }) 85 } 86 87 88 let sx = sendXml(); 89 // 发送请求获取新闻内容 90 sx.next(); 91 92 93 94 </script> 95 96 97 </body> 98 </html>