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

1.普通的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.有時候碰到的業務邏輯是這樣的，請求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('請求失敗');
}

3.jsonp跨域，動態新增script標籤實現跨域，注意這裡有一個callback需要跟server協商好

function switchEngineRoomAjax(api,statusChanged){
    var api = api;
    var statusChanged = statusChanged;
    var url = api + "?method=setStatus" + "&status=" + statusChanged;

    $.ajax({
        type: "GET",  
        url: url,  
        dataType: "jsonp",
        jsonp: "callback",// 這裡的callback是給後端接收用的，前端通過動態新增script標籤，完成回撥
        success: function(res){
            if (res.code == 0) {
                console.log('更改狀態 jsonp獲取資料成功！');
            }
            else{
            }
        }
    });
};

4.還會碰上這種業務邏輯，ajax1 ajax2 ajax3三個非同步請求，不一定哪個先返回資料，都請求成功後，執行一個回撥  function，需要注意的是，單獨的ajax也需要是new的promise

ajax1:function(){
    var promise = new Promise(function (resolve, reject) {
        var url = "/api.php?Action=xxx;
        $.get(url, function(res) {
            if (res.code == 0) {
                resolve('queryLog完成！');
            }
            else{
            }
        }, "json");
    });
    return promise
},
ajax2: function(){
    var promise = new Promise(function (resolve, reject) {
        var url = "/api.php?Action=xxx;
        $.get(url, function(res) {
            if (res.code == 0) {
                resolve('queryGroupNodeList完成！');
            }
            else{
            }
        }, "json");
    });
    return promise
},
ajax3: function(){
    var promise = new Promise(function (resolve, reject) {
        var url = "/api.php?Action=xxx;
        $.get(url, function(res) {
            if (res.code == 0) {
                resolve('queryGroupNodeMapList完成！');
            }
            else{
            }
        }, "json");
    });
    return promise
},
initQuery: function(){
    var mySelf = this;
    var promiseList = [];
    var ajax1Promise = mySelf.ajax1();
    var ajax2Promise = mySelf.ajax2();
    var ajax3Promise = mySelf.ajax3();

    promiseList.push(ajax1Promise,ajax2Promise,ajax3Promise);
    var p1 = new Promise(function (resolve, reject) {
        console.log('建立1.2秒延時執行promise');
        setTimeout(function () {
            resolve("1.2秒延時執行promise");
        }, 1200);
    });
    promiseList.push(p1)

    Promise.all(promiseList).then(function (result) {
        console.log('ajax全部執行完畢：' + JSON.stringify(result)); // ["Hello", "World"]
        mySelf.assembleTableData();
    });
},