Generator 函数和普通的函数区别

  1. function 和函数名之间有一个 * 号。 * 可以贴着函数名写,也可以贴着 function 后面写,但就是不能都贴着写 function*show()

  2. 函数体内部使用了 yield 表达式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    function * show (num1,num2) {
    alert(`${num1}:${num2}`);
    let a = yield 33;//33 表示第一个环节next的返回的中间结果
    alert("b");
    alert(a);
    return 44;//对应最后一个next的返回值
    }
    let geneObj = show(11,22);//generator函数不会直接执行里面的代码,而是返回一个对象
    let aa = geneObj.next(1);//踹一脚,走一步 第一个next是没法给yield传参的 弹出 11:22
    let bb = geneObj.next(2);//踹一脚,走一步 弹出 b 2
    console.log(aa);//{value: 33, done: false}
    console.log(bb);//{value: 44, done: true}
  • generator 生成器 yield 放弃执行的权利
  • 普通函数: 是一条道走到黑,不会停的
  • generator 函数可以停(走走停停)
  • generator 函数不能写成箭头函数的形式
  • yield 可以往里面传东西(通过next传),可以返回一个中间结果对象
  • 如果碰到了 yield , 就会把 yield 后面的值作为一个中间结果对象返回, 此时函数相当于停止了, 下次再执行 next() 方法的时候, 函数又会从上次退出去的地方重新开始执行
  • 如果把 yield 和 return 一起使用的话, 那么 return 的值也会作为最后的返回值, 如果 return 语句后面还有 yield , 那么这些 yield 不生效
  • 不能在非 Generato r函数中使用 yield

    普通 Ajax 和 Promise 和 Generator 写法比较

  1. Ajax回调

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    //回调
    $.ajax({
    url: xxx,
    dataType: 'json'
    success(data1){
    $.ajax({
    url: xxx,
    dataType: 'json'
    success(data2){
    $.ajax({
    url: xxx,
    dataType: 'json'
    success(data3){
    //完事儿
    },
    error(){
    alert('错了');
    }
    });
    },
    error(){
    alert('错了');
    }
    });
    },
    error(){
    alert('错了');
    }
    });
  2. Promise 写法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    Promise.all([
    $.ajax({url: xxx, dataType: 'json'}),
    $.ajax({url: xxx, dataType: 'json'}),
    $.ajax({url: xxx, dataType: 'json'})
    ]).then(results=>{
    //完事儿
    }, err=>{
    alert('错了');
    });
  3. Generator 写法

    1
    2
    3
    4
    5
    6
    7
    runner(function *(){
    let data1=yield $.ajax({url: xxx, dataType: 'json'});
    let data2=yield $.ajax({url: xxx, dataType: 'json'});
    let data3=yield $.ajax({url: xxx, dataType: 'json'});

    //完事儿
    });
  • Promise——一次读一堆
  • generator——逻辑性(读的时候夹杂逻辑 )