用jq發送多個ajax然後執行回調的小技巧

這次帶給大家用jq發送多個ajax然後執行回調的小技巧，用jq發送多個ajax然後執行回調的注意事項有哪些，下面就是實戰案例，一起來看一下。

推薦axios.js
Axios 是一個基於 promise 的 HTTP 函式庫，可以用在瀏覽器和 node.js 中。

從瀏覽器建立XMLHttpRequests

從node.js 建立http請求

支援PromiseAPI

攔截請求和回應

#轉換請求資料和回應資料

取消請求

自動轉換JSON 資料

客戶端支援防禦XSRF

下文是基於jquery#的程式碼非axios.js程式碼。

本人測試有效，如果有人用下面的方法還是行不通，可以在下面評論中說明。 Axios.js是一個基於 promise 的 HTTP 庫，建議大家到npm上瀏覽一下Axios.js，中文版傳送門，以下的內容不重要。 。 。

這需求我見過的有兩種解決方法：
（個人覺得還是第一種方法好些）

1.第一種是計數法，它需要在外面宣告一個能夠讓每個回調存取到的變數，在每個請求成功的回呼函數裡將此變數加1，如果變數加到最大就執行回調，但是需要在每個請求成功的回呼函數裡做判斷。

特點：由於ajax本來就是異步的，所以每個ajax彼此互不干擾，不必按照順序一個接著一個加載，相對下面第二種總請求時間更短。

計數法的demo

function countAjax(arr,cb) {    var len = arr.length,
        result = [],
        count = 0;    for(let i=0; i<len; i++) {
        $.ajax({            type: arr[i].type,            url: arr[i].url,            success: function(res){
                count++;
                result[i] = res;                console.log("第" + ( i + 1 ) + "个ajax回调函数 " + res);                if( count == len ) {
                    cb(result);
                }
            }
        });
    }
}var arr = [{    url: "keepWords",    type: "get"},{    url: "xx",    type: "get"},{    url:"yy",    type: "get"}];
countAjax(arr,function(result){    console.log("all of ajax is done",result);
});

親測有效，在伺服器那頭可以setTimeout模擬網路延遲
提示，如果有人用下面的方法還是行不通，可以在下面評論中說明！

2.第二種是利用promise，在上一個請求完事之後，發送下一個請求。
特點：每個ajax都要排隊按順序請求和回應，需要在上一個請求回應成功之後再進行下一個請求，是一個接著一個的。

promise的demo

function orderAjax(arr,cb) {    var promise,
        result = [];    for(let i=0,len=arr.length; i<len; i++) {        if(!promise) {
            promise = $.ajax({                url: arr[i].url,                type: arr[i].type
            });
        }else {
            promise = promise.then(function(res) {
                result.push(res);                console.log("第" + ( i ) + "个ajax回调函数 " + res);                return $.ajax({                    url: arr[i].url,                    type: arr[i].type
                });
            })
        }
    }
    promise.then(function(res){
        result.push(res);        console.log("第" + ( arr.length ) + "个ajax回调函数 " + res);
        cb(result);
    });
}var arr = [{    url: "keepWords",    type: "get"},{    url: "xx",    type: "get"},{    url:"yy",    type: "get"}];
orderAjax(arr,function(result) {    console.log(&#39;all of ajax is done&#39;,result);
})

親測有效，在伺服器那頭可以setTimeout模擬網路延遲
提示，如果有人用下面的方法還是行不通，可以在下面評論中說明！
另外強烈推薦axios.js
Axios 是一個基於 promise 的 HTTP 函式庫，可以用在瀏覽器和 node.js 中。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

#相關閱讀：

css的Counters屬性詳解

JavaScript的函數重載詳解

以上是用jq發送多個ajax然後執行回調的小技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！