前言

最近在做一個針對單個節點測速的功能頁面，測速的邏輯是，測上傳速度時，前端傳5m數據給server，記錄上傳和返回數據的時間，測下載速度時，從server下載1m的數據，記錄下載和下載成功的時間，上傳和下載用的是ajax同步以避免客戶端帶寬阻塞的問題，并進行3次取平均值。在開發過程過，因為ajax同步異步的問題，走了不少彎路，特地也把之前遇到的業務邏輯整理匯總一下。

ajax請求方法如下

一、普通的ajax，async即同步異步處理，success之后，會有data返回值，status請求狀態，xhr封裝的是請求頭，但要注意是的是，并不是所有的請求頭信息都能獲取到的，比如center-length就獲取不到

$.ajax({  type: "GET",  async: true, //異步執行 默認是true異步  url: url,  dataType: "json",  // jsonp: "callback",  success: function(data, status, xhr){   console.log(data);//返回值   console.log(status);//狀態   console.log(xhr);//obj   console.log(xhr.getResponseHeader("Content-Type"));//application/octet-stream   console.log(xhr.getResponseHeader("Center-Length"));//null  }  }); 

二、有時候碰到的業務邏輯是這樣的，請求2依賴請求1的返回結果，請求3依賴請求2的返回結果，如果用回調的方式寫，會很冗長，解決的方法有兩個，首先來看ES5的解決辦法

(1)ES5的解決辦法，用ajax同步，默認的ajax是異步的，即多個請求同時執行，改成同步后，ajax一個一個的執行，這樣ajax2就能取到ajax1的返回結果了

let res1 = "" let res2 = ""  $.ajax({  type: 'get',  async: false, //同步執行 默認是true異步  url: pars.domain + "/api.php?Action=xxx&date=2017-03-08&t=" + (new Date).getTime(),  dataType: 'json',  success: function(res) {   if(res.code == 0){    res1 = res.data.bandwidth[0]   }else{       }  } });  $.ajax({  type: 'get',  async: false, //同步執行 默認是true異步  url: pars.domain + "/api.php?Action=xxx&date=2017-03-08&dom1111" + res1 + "&t=" + (new Date).getTime(),  dataType: 'json',  success: function(res) {   if(res.code == 0){    res2 = res.data.bandwidth[0]   }else{       }  } }); 

(2)ES6的解決辦法，用promise的then方法，效果和上面的一樣，ajax會按順序執行，并且后面的ajax會拿到前一個ajax的返回值，這樣寫起來，代碼看起來會很流暢

let pro = new Promise(function(resolve,reject){  let url = pars.domain + "/api.php?Action=xxx=2017-03-08&t=" + (new Date).getTime()  let ajax = $.get(url, function(res) {   if (res.code == 0) {    resolve(resData);   }   else{   }  }, "json");  console.log('請求pro成功'); });   //用then處理操作成功，catch處理操作異常 pro.then(requestA)  .then(requestB)  .then(requestC)  .catch(requestError);  function requestA(res){  console.log('上一步的結果：'+res);  console.log('請求A成功');  let proA = new Promise(function(resolve,reject){   let url = pars.domain + "/api.php?Action=xxx&date=2017-03-08&t=" + (new Date).getTime()   let ajax = $.get(url, function(res) {    if (res.code == 0) {     resolve(resData);    }    else{    }   }, "json");  });  return proA }  function requestB(res){  console.log('上一步的結果：'+res);  console.log('請求B成功');  let proB = new Promise(function(resolve,reject){    let url = pars.domain + "/api.php?Action=xxx&date=2017-03-08&t=" + (new Date).getTime()   let ajax = $.get(url, function(res) {    if (res.code == 0) {     resolve(resData);    }    else{    }   }, "json");  });  return proB }  function requestC(res){  console.log('上一步的結果：'+res);  console.log('請求C成功');  let proC = new Promise(function(resolve,reject){   let url = pars.domain + "/api.php?Action=xxx&date=2017-03-08&t=" + (new Date).getTime()   let ajax = $.get(url, function(res) {    if (res.code == 0) {     resolve(resData);    }    else{    }   }, "json");  });  return proC }  function requestError(){  console.log('請求失敗'); }