有這樣一個場景,在一個頁面上有多個列表,須要發多個請求去獲取數據。全部的數據獲取完以後須要去執行一個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...數組