Generator 和 async

一、介绍

        Generator是ES6提供的一种异步编程解决方案，语法不同于普通函数；简单的把Generator 理解为一个状态机，封装了多个内部状态。执行Generator 函数会返回一个迭代器对象，可以通过调用迭代器next依次遍历Generator函数内部的每一个状态。

二、特征

Generator函数有两个特征：
1.function关键字与函数名之间有个星号；
2.函数内部使用yield表达式

function* helloWorldGenerator() { 
	yield '1'; 
	yield '2'; 
	return '3'; 
}

        如上代码有三个状态, '1'、'2'、'3'，一个yield就是一个状态，一个yield就是一个代码运行节点，执行一次迭代器next方法，到第一个yield，再执行一次，到下一个yield。yeild后面是每一种状态的描述。通过迭代器对象的next方法控制的代码的向下执行。

三、返回值

function* test(){
    //想要Generato函数有返回值
     3行代码
    return 1
     3行代码
    return 2
     3行代码
    return 3 
    3行代码
    return 4
}

              因为return会阻止后面的代码运行，所以 Generato提供了yield，yiled也是返回值，但是执行一次状态停在了第一个yield ，依次执行next方法，执行下一个yield状态。代码分段执行，见到yield分一段。上一个yield之后是下个状态的开始,下一个状态的结束在下一个yield。yield后面的是返回值。最后一个yield可以return返回。

function* test(){
    //想要Generato函数有返回值
    //Generator状态机管理
     3行代码
    yield 1
     3行代码
    yield 2
     3行代码
    yield 3 
    3行代码
    yield 4
}

四、使用

1.如何创建Generator函数  

每个状态之间都是独立的的

 function* test(){
            // 每一个yield之间状态是独立的
            log();
            yield 1;
            log();
            yield 2;
            log();
            yield 3;
            log();
            yield 4;
            log();
        }
        let result=test();
        console.log(result);//返回的是一个Generator对象，也是一个迭代器对象
        console.log(result.next());//接收第一个状态的返回结果 Object { value: 1, done: false } value是yield返回值
        console.log(result.next());//Object { value: 2, done: false }
        function log(){
            for(i=1;i<=10;i++){
                console.log(i)
            }
        }

2.模拟发起异步请求

拿到第一个状态的返回结果在执行第二个状态，状态之间数据传递通过next

function* test(){
            // 每一个yield之间状态是独立的
            log();
            let res=yield 1; //拿res接收yield 1的返回结果 res-->1
            log();
            // 处理res 上一个状态拿到res当前状态想用res通过调用next()是拿不到的,因为它是异步的，只有在下一次状态调用的时候传递进去才行
            console.log(res)
            yield 2; 
            log();
            yield 3;
            log();
            yield 4;
            log();
        }
        let result=test();
        console.log(result);//返回的是一个Generator对象，也是一个迭代器对象
        console.log(result.next());//接收第一个状态的返回结果 Object { value: 1, done: false } value是yield返回值
        console.log(result.next());//Object { value: 2, done: false }；//undefined
        // 如果想要在第二个状态调用第一个状态的数据  需要传递数据 传什么第二段的res就是什么 他会作为上一个状态的结果传递给下一个状态
        //
        function log(){
            for(i=1;i<=10;i++){
                console.log(i)
            }
        }

3.ajax获取数据

function* test(){
            let res=yield getData();
            // 上一个状态声明变量 下一个状态使用 
            console.log(res);
            yield '结束了'
        }
        let result=test();
        result.next();
        function getData(){
            $.get('http://xxx.xx.xxx.xx:8888/index/',{},(response)=>{
                //response参数是上一个状态的返回值
                // 如果想要实现数据传递 发起第二段程序的执行 拿上一个状态的response作为下一个状态的入口
                result.next(response);
                // 在上一个状态结果出来之后作为下一个状态的入口
            });

        }

五、async函数

        async是一个函数，是一个异步编程解决方案，内部封装了generator函数，是一个语法糖，内部自带执行器，与await配合使用；异步编程，同步处理。

 async function test(){
            let res1=await $.get('http://xxx.xx.xxx.xx:8888/index/carousel/findAll');
            console.log(res1);
            let res2=await         
            $.get('http://xxx.xx.xxx.xx:8888/index/article/findCategoryArticles');
            console.log(res2)
        }
test()