es6之Generator以及异步的三种写法

<script>
function *a() {
   alert("a");
   yield;
   alert("b");
   yield;
   alert("c");
   yield;
}
const b  = a();
      b.next();
      b.next();
</script>

generator与普通函数的明显区别是 *，在函数名前有一个 * ，调用generator函数不能直接执行而是返回一个对象，调用该对象的next()方法，才可以执行。

• yield暂停操作

传参：第一个next()不能传参，后面的可以

function *a() {
    alert("a");    //"a"
    const m = yield;
    alert("b");    //b""
    alert(m);      //"5"
    yield;
    alert("c");    //"c"
    yield;
}
const m = a.next();
      m.next(5);

返回值：

function *a() {
    alert("a");   //"a"
    yield 3;
    alert("b");    //b""
    yield 7;
    alert("c");    //"c"
    return 10;
}
const g = a(); 
const m = g.next();       //m = 3 
const o = g.next();     // o = 7
const p = g.next();     // p = 10

• next一个next()推动函数前进一下，直到遇到下一个yield

---

异步操作

• 回调（普通写法）

    $.ajax({
        url:xxxx,
        dataTytpe:"json",
        success(data1){
            $.ajax({
                url:xxxx,
                dataTytpe:"json",
                success(data2){
                    $.ajax({
                        url:xxxx,
                        dataTytpe:"json",
                        success(data3){
                            alert(data3);
                        },
                        error(){
                            alert("错误");
                        }
                    })
                },
                error(){
                    alert("错误");
                }
            }) 
        },
        error(){
            alert("错误");
        }
    })

• promis

Promise.all([
   $.ajax({
        url: '',
}),$.ajax({
        url: '',
}),$.ajax({
        url: '',
}),
...
]).then(function(arr){
    alert("全都成功了");
},function(err){
    alert("全都失败了"+err);
});

• generator(适合带逻辑的请求)

runner(function *(){
     let data1 = yield $.ajax({...});
     let data2 = yield $.ajax({...});
     let data3 = yield $.ajax({...});
})