12.生成器

生成器

生成器函数是ES6提供的一种异步编程方案,语法行为与传统函数完全不同

//生成器其实就是一个特殊的函数

//异步编程  纯回调函数  
function * gen(){
    console.log("hello generator");
}

let iterator = gen();
console.log(iterator);//gen{} object
iterator.next();//"hello generator"
//函数代码的分隔符
function * gen1(){
    console.log(111);
    yield '一直没有耳朵';
    console.log(222);
    yield '一直没有尾巴';
    console.log(333);
    yield '真奇怪';
    console.log(444);
}

let iterator = gen1();
iterator.next();//"111"
iterator.next();//"222"
iterator.next();//"333"
iterator.next();//"444"

//遍历
for(let v of gen()){
    console.log(v);
}
//'一直没有耳朵'
//'一直没有尾巴'
//'真奇怪'


 console.log(iterator.next());//{value:'一直没有耳朵',done:false}
 console.log(iterator.next());//{value:'一直没有尾巴',done:false}
 console.log(iterator.next());//{value:'真奇怪',done:false}
 console.log(iterator.next());//{value:undefined,done:true}

生成器函数参数

function*gen(arg){
    console.log(arg);
    let one = yield 111;
    console.log(one);
    let two = yield 222;
    console.log(two);
    let three = yield 333;
    console.log(three);
}

//执行获取迭代器对象
let iterator = gen("AAA");
console.log(iterator.next());//AAA {value:111,done:false}
//next方法可以传入实参
 console.log(iterator.next('BBB'));//BBB {value:222,done:false}
 console.log(iterator.next('CCC'));//CCC {value:333,done:false}
 console.log(iterator.next('DDD'));//{value:undefined,done:true}

生成器函数实例

实例一:
//异步编程 文件操作 网络操作(ajax,request) 数据库操作
//1s后控制台输出 111 ,2s后输出 222, 3s后输出 333

function one(){
    setTimeout(()=>{
        console.log(111);
        iterator.next()
    },1000)
}
function two(){
    setTimeout(()=>{
        console.log(222);
        iterator.next()
    },1000)
}
function three(){
    setTimeout(()=>{
        console.log(333);
        iterator.next()
    },1000)
}
function*gen(){
    yield one();
    yield two();
    yield three();
}
//调用生成器函数
let iterator = gen();
iterator.next();
//111
//222
//333


实例二:
//模拟获取 用户数据 订单数据 商品数据
function getUsers(){
    setTimeout(()=>{
        let data = '用户数据';
        //调用next方法,并且将数据传入
        iterator.next(data);
    },1000)
}
function getOrders(){
    setTimeout(()=>{
        let data = '订单数据';
        iterator.next(data);
    },1000)
}
function getGoods(){
    setTimeout(()=>{
        let data = '商品数据';
        iterator.next(data);
    },1000)
}

function * gen(){
    let users = yield getUsers();
    console.log(users);
    let orders = yield getOrders();
    console.log(orders);
    let goods = yield getGoods();
    console.log(goods);
}

//调用生成器函数
let iterator = gen();
iterator.next();

相关文章

原文连接:https://www.cnblogs.com/dupd/p/5951311.htmlES6...
以为Es6,javascript第一次支持了module。ES6的模块化分为导...
视频讲解关于异步处理,ES5的回调使我们陷入地狱,ES6的Prom...
TypeScript什么是TypeScript?TypeScript是由微软开发的一款开...
export class AppComponent { title = 'Tour of heroes...
用 async/await 来处理异步昨天看了一篇vue的教程,作者用as...