Generator生成器

Generator生成器

Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同。异步变同步执行。

基本语法

function* gen() {
  console.log(111);
  yield 'a';
  console.log(222);
  yield 'b';
  console.log(333);
  yield 'c';
  console.log(444);
}
let iterator = gen()

console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());

for (const v of iterator) {
  console.log(v);
}

输出结果： 111 { value: 'a', done: false } 222 { value: 'b', done: false } 333 { value: 'c', done: false } 444 { value: undefined, done: true }

实例1

需求 1s 后控制台输出 111 2s后输出222 3s后输出333

//定时器,回调方式
setTimeout(() => {
  console.log(111);
  setTimeout(() => {
    console.log(222);
    setTimeout(() => {
      console.log(333);
    }, 3000);
  }, 2000);
}, 1000);

//生成器方式
function one() {
  setTimeout(() => {
    console.log(111);
    iterator.next()
  }, 1000);
}
function two() {
  setTimeout(() => {
    console.log(222);
    iterator.next()
  }, 2000);
}

function three() {
  setTimeout(() => {
    console.log(333);
    iterator.next()
  }, 3000);
}

function* gen() {
  yield one();
  yield two();
  yield three();
}

输出结果： 111 222 333

实例2

需求 模拟获取用户数据，订单数据，商品数据

function getUsers() {
  setTimeout(() => {
    let data = '用户数据'
    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()

注意： next()传参，第二次调用next的参数才是 第一个yield接收。