(axios.js)封裝函數(shù)利用jq發(fā)送多個ajax,等所有返回再執(zhí)行回調(diào)

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

  • 從瀏覽器中創(chuàng)建 XMLHttpRequests
  • 從 node.js 創(chuàng)建 http請求
  • 支持PromiseAPI
  • 攔截請求和響應(yīng)
  • 轉(zhuǎn)換請求數(shù)據(jù)和響應(yīng)數(shù)據(jù)
  • 取消請求
  • 自動轉(zhuǎn)換 JSON 數(shù)據(jù)
  • 客戶端支持防御XSRF

下文是基于jquery的代碼非axios.js代碼。

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

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

1.第一種是計數(shù)法,它需要在外面聲明一個能夠讓每個回調(diào)訪問到的變量,在每個請求成功的回調(diào)函數(shù)里將此變量加1,如果變量加到最大就執(zhí)行回調(diào),但是需要在每個請求成功的回調(diào)函數(shù)里做判斷。

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

計數(shù)法的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回調(diào)函數(shù) " + 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);
});

親測有效,在服務(wù)器那頭可以setTimeout模擬網(wǎng)絡(luò)延遲
提示,如果有人用下面的方法還是行不通,可以在下面評論中說明!

2.第二種是利用promise,在上一個請求完事之后,發(fā)送下一個請求。
特點:每個ajax都要排隊按順序請求和響應(yīng),需要在上一個請求響應(yīng)成功之后再進行下一個請求,是一個接著一個的。

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回調(diào)函數(shù) " + res);
                return $.ajax({
                    url: arr[i].url,
                    type: arr[i].type
                });
            })
        }
    }
    promise.then(function(res){
        result.push(res);
        console.log("第" + ( arr.length ) + "個ajax回調(diào)函數(shù) " + res);
        cb(result);
    });
}
var arr = [{
    url: "keepWords",
    type: "get"
},{
    url: "xx",
    type: "get"
},{
    url:"yy",
    type: "get"
}];
orderAjax(arr,function(result) {
    console.log('all of ajax is done',result);
})

親測有效,在服務(wù)器那頭可以setTimeout模擬網(wǎng)絡(luò)延遲
提示,如果有人用下面的方法還是行不通,可以在下面評論中說明!
另外強推薦axios.js
Axios 是一個基于 promise 的 HTTP 庫,可以用在瀏覽器和 node.js 中。

  • 從瀏覽器中創(chuàng)建 XMLHttpRequests
  • 從 node.js 創(chuàng)建 http請求
  • 支持PromiseAPI
  • 攔截請求和響應(yīng)
  • 轉(zhuǎn)換請求數(shù)據(jù)和響應(yīng)數(shù)據(jù)
  • 取消請求
  • 自動轉(zhuǎn)換 JSON 數(shù)據(jù)
  • 客戶端支持防御XSRF
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容