介绍

1. 生成器是一种特殊的函数，他可以实现异步编程。

2. 生成器也是一个可迭代对象，可以通过 for...of 遍历。

3. 与普通函数相比，其定义方式及调用方式有所不同。

   // 定义
   function * test(){
       console.log('this is add function');
   }
   
   // 调用
   test().next();

yield 语句

1. 作用：作为函数的分隔符，把一个函数分割 n 份，每次调用 .next() 都会执行一块函数。

2. yield 后面跟着表达式或字面量。

   function * test(){
       console.log('Part 1');
       yield 'a';
       console.log('Part 2');
       yield 'b';
       console.log('Part 3');
   }
   
   let res = test();
   res.next();
   res.next();
   res.next();

   

3. next() 的返回值

   function * test(){
       console.log('Part 1');
       yield 'a';
       console.log('Part 2');
       yield 'b';
       console.log('Part 3');
   }
   
   let res = test();
   console.log(res.next());
   console.log(res.next());
   console.log(res.next());

   

4. for...of 遍历

   function * test(){
       console.log('Part 1');
       yield 'a';
       console.log('Part 2');
       yield 'b';
       console.log('Part 3');
   }
   
   let res = test();
   for(let item of res) {
       console.log(item);
   }

   

计时器问题

1. 需求：第一秒输出 111，第三秒输出 222，第六秒输出 333。

2. 之前做法（回调地狱）

   setTimeout(() => {
       console.log(111);
       setTimeout(() => {
           console.log(222);
           setTimeout(() => {
               console.log(333);
           }, 3000);
       }, 2000);
   }, 1000);

3. 使用异步

   let one = () => {
       setTimeout(() => {
           console.log(111);
           res.next();
       }, 1000);
   }
   let two = () => {
       setTimeout(() => {
           console.log(222);
           res.next();
       }, 2000);
   }
   let three = () => {
       setTimeout(() => {
           console.log(333);
           res.next();
       }, 3000);
   }
   
   function * test(){
       yield one();
       yield two();
       yield three();
   }
   
   let res = test();
   res.next();

模拟网络请求

1. 间隔一秒返回用户数据、订单数据、商品数据

2. 代码

   let getUser = () => {
       setTimeout(() => {
           let data = {
               id: 1,
               nickname: 'MiYou'
           }
           res.next(data);
       }, 1000);
   }
   let getOrder = () => {
       setTimeout(() => {
           let data = {
               id: 1,
               user_id: 1,
               show_id: 1
           }
           res.next(data);
       }, 1000);
   }
   let getShop = () => {
       setTimeout(() => {
           let data = {
               id: 1,
               title: '智能手机',
               money: 1000
           }
           res.next(data);
       }, 1000);
   }
   
   function * test(){
       let user = yield getUser();
       console.log(user);
       let order = yield getOrder();
       console.log(order);
       let shop = yield getShop();
       console.log(shop);
   }
   
   let res = test();
   res.next();