详谈Generator

Posted 2020-11-30 sunhang32

Generator究竟有什么样的作用呢????

• 他是ES6提出的一个解决异步问题方案

  先看一段代码, 感受一下generator函数和普通函数的区别

   function* test(){
        yield 2;
        yield 3;
        yield 5;
    }
    var app = test()            // 此时代码不会执行
    var a = app.next()          // 这个时候代码才开始真正开始执行 
    console.log(a)              // {value:2,done:false}
    var b = app.next()          // 继续执行
    console.log(b)              // {value:3,done:false}
    var b = app.next()          // 最后一步
    console.log(b)              // {value:5,done:true}

从上面的代码可以看出来,generator可以让函数在写的时候停止运行,就好比我们在打断点的时候,那么我就在想,如果我写异步函数是不是也可以让他停止呢,激动的我赶紧试了一下

function* getTime(){
    //这里我就用axios打个比方,就不写一段promise了,大家理解这里可以放一个promise就行
    yield axios.get('xxxxx')
}
var app = getTime()
app.next()     //  {value,done}  这里面的value就是返回的axios数据

• 总结一下,那么generator就是针对异步的一种解决方法
• 既然了解了他的用处,那么我们就来好好学习一下如何去使用他

使用Promise

• Promise的书写规范是什么

// 在写函数的时候必须用一个*  
function* add(){}
function *add(){}
// 那么在es6之后函数可以写成
get(){
    ...
}
//所以还有另外一种写法
*get(){
    
}

• Promise如何使用

  这时候需要了解一个关键字 yield 这个关键字必须在generator函数内,就好比await必须用在async内部一样

var app = test()  //test是一个generator函数
app.next()        //会把程序中的yield后面的值拿出来,并且吧yield后面的数据传递给返回的对象的value中
//例如
function *test(){
    yield 2
}
test().next()     //test()本身不会执行,当调用next的时候才会执行,就是返回一个对象 {value:2,done:true}
//再理解一下,yield后面的值赋给了value,done是指generator函数后面还存在return或者yield等程序,就是后面时候还有代码段

• 那么我们会写generator函数了,并且也会调用了
• 如果还能传递参数了,那么我们这个函数岂不是用起来很完美么

function* test(){
    console.log('程序开始了')
    console.log(`1.${yield}`)  //这里面我们使用es6的字符串插值方式
    console.log(`2.${yield}`)  //这里面我们调用
}
var app = test()                //这个时候只是让app变成一个指向generator函数的指针,并不会打印出值来
app.next()                     
app.next('第一步')             
app.next('第二步')             
//接下来就是打印的结果了
程序开始执行了
1.第一步
2.第二步

• 分享不易,感谢star