几种异步请求的区别、简单写法

• 回调
• Promise-------适合读取一堆数据
• generator-----适合掺杂逻辑处理----不能写成箭头函数的形式

一次性获取一堆数据时

回调–层层嵌套

// 回调
$.ajax({
    url:url,
    dataType:"json",
    success(data1){
        $.ajax({
            url:url2,
            dataType:"json",
            success(data2){
                $.ajax({
                    url:url3,
                    dataType:"json",
                    success(data3){
                        //数据获取成功
                    },
                    error(){
                        console.log("错了")
                    }
                })
            },
            error(){
                console.log("错了")
            }
        })
    },
    error(){
        console.log("错了")
    }
})

Promise

Promise.all([
    $.ajax({url:url1,dataType:"json"});
    $.ajax({url:url2,dataType:"json"});
    $.ajax({url:url3,dataType:"json"});
]).then(result=>{
   // 数据获取成功，可以干点别的事了。。。
},err=>{
    console.log(err)
})

generator

runner(function *(){
    let data1 = yield $.ajax(url:url, dataType:"json");
    let data2 = yield $.ajax(url:url, dataType:"json");
    let data3 = yield $.ajax(url:url, dataType:"json");

    //结束
})

带逻辑时，比如先获取用户，再根据用户是否是VIP来判断获取下一个

回调写法

// 普通回调
$.ajax({url:用户,dataType:"json",success(data1){
        if(data1.name == VIP){
            $.ajax({url:VIP,dataType:"json",success(data1){
                    // 生成列表
                },
                error(){
                   // 错了
                }
            })
        } else {
            $.ajax({url:VIP,dataType:"json",success(data1){
                    //生成列表
                },
                error(){
                  // 错了
                }
            })
        }
    },
    error(){
        // 错了
    }
})

Promise(逻辑嵌套时，还没有普通回调方便)

Promise.all([
    $.ajax({url:用户,dataType:"json"});
]).then(result=>{
    let userdata = result[0];
   if(userdata == VIP){
       Promise.all([
           $.ajax({url:VIP,dataType:"json"});
       ]).then(results => {
           // 生成列表。。。
       },err=>{

       })
   } else {
       Promise.all([
           $.ajax({url:普通,dataType:"json"});
       ]).then(results => {
          // 生成列表。。。
       },err=>{

       })
   }
},err=>{
    console.log(错了)
})

generator 超适合逻辑处理

runner(function *(){
    var data1 = yield $.ajax({url:url, dataType:"json"});
    if(data1.type == "VIP"){
        let items =  yield $.ajax({url:VIP, dataType:"json"});
    }else{
        let items2 =  yield $.ajax({url:普通, dataType:"json"});
    }
    // 生成列表。。。
})

附带：generator写法中用到的runner.js

function runner(_gen){
  return new Promise((resolve, reject)=>{
    var gen=_gen();

    _next();
    function _next(_last_res){
      var res=gen.next(_last_res);

      if(!res.done){
        var obj=res.value;

        if(obj instanceof Promise){
          obj.then((res)=>{
            _next(res);
          }, (err)=>{
            reject(err);
          });
        }else if(typeof obj=='function'){
          if(obj.constructor.toString().startsWith('function GeneratorFunction()')){
            runner(obj).then(res=>_next(res), reject);
          }else{
            _next(obj());
          }
        }else{
          _next(obj);
        }
      }else{
        resolve(res.value);
      }
    }
  });
};

可通过npm 下载，包中的index.js 就是代码中用到的runner.js用于配合generator使用，很方便
地址：npm i yield-runner-blue