generator 的学习

这玩意就是一个函数执行器，就比如将一件事情分成好几步骤， 然后踹一脚走一步

<script type="text/javascript">

                   let fn1 = ()=>{
                        setTimeout(()=>{
                            console.log(11111);
                        },1000);
                    }
                    let fn2 = ()=>{
                        setTimeout(()=>{
                            console.log(222);
                        },1000);
                    }
                      let fn3 = ()=>{
                        setTimeout(()=>{
                            console.log(333);
                        },1000);
                    }
                    function *  gn(){
                           yield fn1()
                           yield fn2()
                           yield fn3()

                    }
                    const iterator = gn();
                    iterator.next();
                    iterator.next();
                    iterator.next();
                    iterator.next();
                    
        </script>

上面的逻辑非常简单，踹一脚走一步

但是我这里要标注清楚， 走一步走多少

当执行next方法时， 会执行一个 yield 整条语句，然后处于等待状态，然后在next 方法， 再执行一个 yield 语句

 

————————————————————————————————————————

我们修改下代码;

 <script type="text/javascript">

                    let fn1 = ()=>{
                        setTimeout(()=>{
                            console.log(11111);
                            iterator.next(1111);
                        },1000);
                    }
                    let fn2 = ()=>{
                        setTimeout(()=>{
                            console.log(222);
                              iterator.next(222);
                        },1000);
                    }
                      let fn3 = ()=>{
                        setTimeout(()=>{
                            console.log(333);
                              iterator.next(333);
                        },1000);
                    }
                    function *  gn(){

                           let r1 = yield fn1()
                           console.log("result"+r1);
                          let r2 =  yield fn2()
                           console.log("result"+r2);
                          let r3 =  yield fn3()
                           console.log("result"+r3);
                    }
                    const iterator = gn();
                    iterator.next(); 
                  
                



        </script>

结果：　

 

看到没，第２个ｎｅｘｔ函数入参作为第一yield 左边的返回值

看到没，第3个ｎｅｘｔ函数入参作为第2个yield 左边的返回值

看到没，第4个ｎｅｘｔ函数入参作为第3个yield 左边的返回值

依照上面的逻辑
我们就可以很轻松的实现了
先获取用户表，得到结果，然后根据结果再执行获取商品表，
这样无论多少
有顺序的异步操作都可以用generactor 实现