異步操作：回調、generator、Promise

異步操作：

1. 回調
2. Promise
3. generator

//回調

// //回調
$.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('錯了');
  }
});

Promise

// Promise
Promise.all([
  $.ajax({url: xxx, dataType: 'json'}),
  $.ajax({url: xxx, dataType: 'json'}),
  $.ajax({url: xxx, dataType: 'json'})
]).then(results=>{
  //完事兒
}, err=>{
  alert('錯了');
});

//generator
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'});

  //完事兒
});

------------------------------------------------------------------------------

帶邏輯-普通回調

//帶邏輯-普通回調
$.ajax({url: 'getUserData', dataType: 'json', success(userData){
  if(userData.type=='VIP'){
    $.ajax({url: 'getVIPItems', dataType: 'json', success(items){
      //生成列表、顯示...
    }, error(err){
      alert('錯了');
    }});
  }else{
    $.ajax({url: 'getItems', dataType: 'json', success(items){
      //生成列表、顯示...
    }, error(err){
      alert('錯了');
    }});
  }
}, error(err){
  alert('錯了');
}});

帶邏輯-Promise

//帶邏輯-Promise
Promise.all([
  $.ajax({url: 'getUserData', dataType: 'json'})
]).then(results=>{
  let userData=results[0];
  if(userData.type=='VIP'){
    Promise.all([
      $.ajax({url: 'getVIPItems', dataType: 'json'})
    ]).then(results=>{
      let items=results[0];

      //生成列表、顯示...
    }, err=>{
      alert('錯了');
    });
  }else{
    Promise.all([
      $.ajax({url: 'getItems', dataType: 'json'})
    ]).then(results=>{
      let items=results[0];

      //生成列表、顯示...
    }, err=>{
      alert('錯了');
    });
  }
}, err=>{
  alert('失敗');
});

帶邏輯-generator

//帶邏輯-generator
runner(function *(){
  let userData=yield $.ajax({url: 'getUserData', dataType: 'json'});
  if(userData.type=='VIP'){
    let items=yield $.ajax({url: 'getVIPItems', dataType: 'json'});
  }else{
    let items=yield $.ajax({url: 'getItems', dataType: 'json'});
  }
  //生成、...
});

------------------------------------------------------------------------------

Promise——一次讀一堆
generator——邏輯性

------------------------------------------------------------------------------