微信扫一扫打赏支持

ES6参考---Generator函数

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>

 

 

 

 

 

 
posted @ 2020-03-28 14:12  范仁义  阅读(182)  评论(0)  编辑  收藏  举报