溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章為大家展示了如何控制JavaScript中異步接口的并發數量，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
可以批量請求數據，所有的URL地址在urls參數中
function sendRequest (urls: string[], max: number, callback: () => void) {}fetch 函數返回的是一個promise，promise對象在實例化的時候就已經開始執行了。
簡易實現
function fetch(url) {
// 模擬接口請求
return new Promise(resolve => {
setTimeout(() => {
resolve(url)
}, 10000*Math.random())
})
}
/**
* 接口請求最大并發量控制
* @param { Array } urls 接口請求地址數組集合
* @param { Number } max 最大并發量
* @param { Function } callback 回調函數
*/
function maxRequestLimit(urls, max, callback) {
// 如果沒有傳入urls或max則不繼續執行
if (!urls || !max) return
// 當請求地址數組集合長度為0，則執行回調函數（如果有的話），并結束后續執行
if(urls.length === 0) {
if(callback) callback()
return
}
// 使用splice方法返回當前要使用的請求集合，同時刪除原有的請求集合
const onceMaxUrlArr = urls.splice(0, max)
// 進行map轉換，將url參數轉換為promise
const onceMaxFetchArr = onceMaxUrlArr.map(url => fetch(url))
// 使用當前這一隊列
Promise.all(onceMaxFetchArr)
.then(res => {
console.log(res)
// 遞歸請求
maxRequestLimit(urls, max, callback)
})
}
maxRequestLimit(['url1', 'url2', 'url3', 'url4', 'url5', 'url6', 'url7', 'url8'], 3, () => {console.log('fetch end')})上面的簡易實現是一個隊列一個隊列進行請求，實際運行效果會存在一定的阻塞，下面通過進一步改善來提高請求的效率
完善實現
function fetch(url) {
// 模擬接口請求
return new Promise(resolve => {
setTimeout(() => {
resolve(url)
}, 10000 * Math.random())
})
}
/**
* 接口請求最大并發量控制
* @param { Array } urls 接口請求地址數組集合
* @param { Number } max 最大并發量
* @param { Function } callback 回調函數
*/
function maxRequestLimit(arr, max, callback) {
// 如果沒有傳入urls或max則不繼續執行
if (!arr || !max) return
// 當請求地址數組集合長度為0，則執行回調函數（如果有的話），并結束后續執行
if(arr.length === 0) {
if(callback) callback()
return
}
let fetchArr = [], // 存儲并發max的promise數組
i = 0;
function toFetch() {
// 所有的請求都受理，則返回一個resolve
if (i === arr.length) return Promise.resolve()
// 取出第i個url， 放入fetch里面 , 每取一次i++
let one = fetch(arr[i++])
//將當前的promise存入并發數組中
fetchArr.push(one)
// 當promise執行完畢后，從數組刪除
one.then(res => {
console.log(res)
fetchArr.splice(fetchArr.indexOf(one), 1)
})
let p = Promise.resolve()
// 當并行數量達到最大后， 用race比較 第一個完成的， 然后再調用一下函數自身。
if (fetchArr.length >= max) p = Promise.race(fetchArr)
return p.then(() => toFetch())
}
// arr循環完后， 現在fetchArr里面剩下的promise對象， 使用all等待所有的都完成之后執行callback
toFetch()
.then(() => Promise.all(fetchArr))
.then(() => callback())
}
maxRequestLimit(['url1', 'url2', 'url3', 'url4', 'url5', 'url6', 'url7', 'url8'], 3, () => { console.log('fetch end') })上述內容就是如何控制JavaScript中異步接口的并發數量，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
