js處理多次ajax請求

通常 爲了減少頁面加載時間，先把核心內容顯示處理，頁面加載完成後再發送ajax請求獲取其他數據

這時就可能產生多個ajax請求，爲了用戶體驗，最好是發送並行請求，這就產生了併發問題，應該如何處理？

1）並行改串行

如果業務邏輯和用戶體驗允許的情況下，可以改爲串行，處理起來最簡單

function async1(){
  //do sth...
}
function async2(){
  //do sth...
  async1();
}
async2();

2）ajax改成同步

$.ajax({
  url:"/jquery/test1.txt",
  async:false
});

3）回調計數

var cnt = 0;
function async1(){
  //do sth...
  callback();
}
function async2(){
  //do sth...
  callback();
}
function callback(){
  cnt++;
  if(2==cnt) console.log('都已執行完畢');
}

4）jquery的$.deferred方法

var d1 = $.Deferred();
var d2 = $.Deferred();
function async1(){
  d1.resolve( "Fish" );
}
function async2(){
  d2.resolve( "Pizza" );
}
$.when( d1, d2 ).done(function ( v1, v2 ) {
  console.log( v1 + v2 + '已完成');
});

5）ES6的Promise方法

function a() {
    return new Promise(function (res, rej) {
        $.ajax({
            url: "a",
            type: "GET",
            async: true,
            dataType: "json",
            success: function (data) {
                console.log(data, "a");
                res(data);
            }
        })
    });
}
function b(data) {
    console.log(data, "data");
    return new Promise(function (res, rej) {
        $.ajax({
            url: "b",
            type: "POST",
            async: true,
            data: JSON.stringify(data),
            dataType: "json",
            success: function (data) {
                console.log(data, "b");
                res();
            }
        })
    });
}
$("#btn").click(function () {
    a().then(function (data) {
        b(data);
    }).then(function () {
    })
})