js異步接口并發(fā)數(shù)量控制的方法示例
請(qǐng)實(shí)現(xiàn)如下的函數(shù)(發(fā)請(qǐng)求的函數(shù)可以直接使用fetch)
- 可以批量請(qǐng)求數(shù)據(jù),所有的URL地址在urls參數(shù)中
- 同時(shí)可以通過max參數(shù) 控制請(qǐng)求的并發(fā)度
- 當(dāng)所有的請(qǐng)求結(jié)束后,需要執(zhí)行callback回調(diào)
function sendRequest (urls: string[], max: number, callback: () => void) {}
fetch 函數(shù)返回的是一個(gè)promise,promise對(duì)象在實(shí)例化的時(shí)候就已經(jīng)開始執(zhí)行了。
簡易實(shí)現(xiàn)
function fetch(url) { // 模擬接口請(qǐng)求 return new Promise(resolve => { setTimeout(() => { resolve(url) }, 10000*Math.random()) }) } /** * 接口請(qǐng)求最大并發(fā)量控制 * @param { Array } urls 接口請(qǐng)求地址數(shù)組集合 * @param { Number } max 最大并發(fā)量 * @param { Function } callback 回調(diào)函數(shù) */ function maxRequestLimit(urls, max, callback) { // 如果沒有傳入urls或max則不繼續(xù)執(zhí)行 if (!urls || !max) return // 當(dāng)請(qǐng)求地址數(shù)組集合長度為0,則執(zhí)行回調(diào)函數(shù)(如果有的話),并結(jié)束后續(xù)執(zhí)行 if(urls.length === 0) { if(callback) callback() return } // 使用splice方法返回當(dāng)前要使用的請(qǐng)求集合,同時(shí)刪除原有的請(qǐng)求集合 const onceMaxUrlArr = urls.splice(0, max) // 進(jìn)行map轉(zhuǎn)換,將url參數(shù)轉(zhuǎn)換為promise const onceMaxFetchArr = onceMaxUrlArr.map(url => fetch(url)) // 使用當(dāng)前這一隊(duì)列 Promise.all(onceMaxFetchArr) .then(res => { console.log(res) // 遞歸請(qǐng)求 maxRequestLimit(urls, max, callback) }) } maxRequestLimit(['url1', 'url2', 'url3', 'url4', 'url5', 'url6', 'url7', 'url8'], 3, () => {console.log('fetch end')})
上面的簡易實(shí)現(xiàn)是一個(gè)隊(duì)列一個(gè)隊(duì)列進(jìn)行請(qǐng)求,實(shí)際運(yùn)行效果會(huì)存在一定的阻塞,下面通過進(jìn)一步改善來提高請(qǐng)求的效率
完善實(shí)現(xiàn)
function fetch(url) { // 模擬接口請(qǐng)求 return new Promise(resolve => { setTimeout(() => { resolve(url) }, 10000 * Math.random()) }) } /** * 接口請(qǐng)求最大并發(fā)量控制 * @param { Array } urls 接口請(qǐng)求地址數(shù)組集合 * @param { Number } max 最大并發(fā)量 * @param { Function } callback 回調(diào)函數(shù) */ function maxRequestLimit(arr, max, callback) { // 如果沒有傳入urls或max則不繼續(xù)執(zhí)行 if (!arr || !max) return // 當(dāng)請(qǐng)求地址數(shù)組集合長度為0,則執(zhí)行回調(diào)函數(shù)(如果有的話),并結(jié)束后續(xù)執(zhí)行 if(arr.length === 0) { if(callback) callback() return } let fetchArr = [], // 存儲(chǔ)并發(fā)max的promise數(shù)組 i = 0; function toFetch() { // 所有的請(qǐng)求都受理,則返回一個(gè)resolve if (i === arr.length) return Promise.resolve() // 取出第i個(gè)url, 放入fetch里面 , 每取一次i++ let one = fetch(arr[i++]) //將當(dāng)前的promise存入并發(fā)數(shù)組中 fetchArr.push(one) // 當(dāng)promise執(zhí)行完畢后,從數(shù)組刪除 one.then(res => { console.log(res) fetchArr.splice(fetchArr.indexOf(one), 1) }) let p = Promise.resolve() // 當(dāng)并行數(shù)量達(dá)到最大后, 用race比較 第一個(gè)完成的, 然后再調(diào)用一下函數(shù)自身。 if (fetchArr.length >= max) p = Promise.race(fetchArr) return p.then(() => toFetch()) } // arr循環(huán)完后, 現(xiàn)在fetchArr里面剩下的promise對(duì)象, 使用all等待所有的都完成之后執(zhí)行callback toFetch() .then(() => Promise.all(fetchArr)) .then(() => callback()) } maxRequestLimit(['url1', 'url2', 'url3', 'url4', 'url5', 'url6', 'url7', 'url8'], 3, () => { console.log('fetch end') })
總結(jié)
到此這篇關(guān)于js異步接口并發(fā)數(shù)量控制的文章就介紹到這了,更多相關(guān)js異步接口并發(fā)數(shù)量控制內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
ionic組件ion-tabs選項(xiàng)卡切換效果實(shí)例
這篇文章主要為大家詳細(xì)介紹了ionic組件ion-tabs選項(xiàng)卡切換效果實(shí)例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-08-08javascript判斷網(wǎng)頁是關(guān)閉還是刷新
本篇文章給大家介紹js判斷網(wǎng)頁是關(guān)閉還是刷新,實(shí)現(xiàn)原理就是通過離開頁面行為時(shí)間onunload觸發(fā)時(shí)間去檢測(cè)此時(shí)的瀏覽器的窗口大小,根據(jù)大小由此判斷用戶是刷新,跳轉(zhuǎn)或是關(guān)閉行為程序,需要的朋友可以參考下本文2015-09-09element-ui組件中input等的change事件中傳遞自定義參數(shù)
這篇文章主要介紹了element-ui組件中的input等的change事件中傳遞自定義參數(shù)的實(shí)例代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05JavaScript實(shí)現(xiàn)圖片放大鏡效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)圖片放大鏡效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-06-06JS實(shí)現(xiàn)登錄頁面記住密碼和enter鍵登錄方法推薦
下面小編就為大家?guī)硪黄狫S實(shí)現(xiàn)登錄頁面記住密碼和enter鍵登錄方法推薦。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。2016-05-05JavaScript實(shí)現(xiàn)函數(shù)重載的代碼示例
在JavaScript中并沒有直接支持函數(shù)重載的機(jī)制,但是可以通過一些技巧來模擬函數(shù)重載的效果,比如使用參數(shù)判斷,使用默認(rèn)參數(shù),對(duì)象參數(shù),這些方法都可以實(shí)現(xiàn)類似函數(shù)重載的效果,所以本文就給大家介紹一下JavaScript如何實(shí)現(xiàn)函數(shù)重載,需要的朋友可以參考下2023-08-08file控件選擇上傳文件確定后觸發(fā)的js事件是哪個(gè)
這篇文章主要介紹了file控件選擇上傳文件確定后觸發(fā)了什么js事件,需要的朋友可以參考下2014-03-03