如何解決多個ajax請求共用一個回調函數?

有這樣一個場景,在一個頁面上有多個列表,須要發多個請求去獲取數據。全部的數據獲取完以後須要去執行一個callback。可是這些接口自己是不會互相依賴的。沒有辦法把callback放到具體的某個請求裏,由於請求數據是異步的,沒法保證這個數據請求完以後其餘接口也已經所有結束了。es6

如何保證在執行callback的時候全部的接口都已經結束
1.將全部的接口嵌套,把下一個接口放在上一個接口的success回調裏。代碼以下ajax

let getList = function (api,data,callback) {
    $.ajax({
        url:  api
        method: 'get',
        data: data,
        dataType: 'json',
        success: function (result) {
            callback()
        }
    });
};

getList(api,data,function(){
    getList(api,data,function(){
        getList(api,data,function() {
            dosomething()
        })
    })
})

這樣一來確實可以保證在執行dosomething()的時候咱們須要的接口已經所有執行完畢。若是接口只有一兩個還好,多了的話其實很很差看。因此能夠用遞歸調用來優化下代碼json

let result = []
//apis 是接口數組
let getList = function(apis,callback,data) {
    $.ajax({
        url:  api[0]
        method: 'get',
        data: data,
        dataType: 'json',
        success: function (resp) {
            if (result.code === 0) {
                result.push(resp.data)
                api.shift()
                if(api.length) {
                    getList(api,callback,data)
                }else{
                    callback(catData);
                } 
            } 
        }
    });
}
getList(apis,callback,data)

咱們上面說了 這些接口其實相互之間是不依賴的。這樣串行雖然能夠保證在全部接口執行完畢以後在執行回調。太費時間。那有沒有辦發讓這些接口並行呢,好比說輸入一個包含多個接口數組,輸出一個包含返回這些數據的數組, 順序和接口的數據要保持一致。api

//同時發起多個請求 apis是接口數組
        for(let i=0; i<apis.length;i++) {
            getList(apis[i],function(resp){
                data[i] = resp
            })
        }
            //利用 proxy 監聽數據的寫入 當數據長度和接口數量一致的時候 就認爲全部接口的都調了。 
            let data = new Proxy({},{
            set: function (target, key, value, receiver) {
                let result =  Reflect.set(target, key, value, receiver);
                var tSize = Object.getOwnPropertyNames(target).length
                if(apisSize === tSize) {
                   dosomething()   
                 })
                }
                return result
            }
        })

Proxy 和 Reflect 參考網址
https://es6.ruanyifeng.com/#d...
https://es6.ruanyifeng.com/#d...數組

相關文章
相關標籤/搜索