JavaScript實現指定數量的併發限制

• 作者：陳大魚頭
• 首發地址： https://github.com/KRISACHAN/ying-study/issues
• 說明：魚頭的學習記錄

正文

在網上看到這麼一道題：

這道題跟魚頭這篇記錄『什麼是時間分片（Time Slicing）？』有點相似，但不同的是這次是限制異步併發的數量。

所以話不多說，我們先來康康實現

首先我們來實現一個分割數組的函數~

const group = (list = [], max = 0) => {
    if (!list.length) {
        return list
    }
    let results = []
    for (let i = 0, len = list.length; i < len; i += max) {
        results.push(list.slice(i, i + max))
    }
    return results
}

這裏就是根據指定的併發數量來分割數組。主要就是for + slice，這沒啥好說的

接下來我們再來一個用async + await實現的請求集合封裝。

我們通Promise.allSettled去執行每一組的請求集合。

Promise.allSettled是一個新的API，跟Promise.all差不多的用法，也是接受的數組，不過不同的是Promise.allSettled會等所有任務結束之後纔會返回結果，而Promise.all只要有一個reject就會返回結果。

const requestHandler = async (
    groupedUrl = [],
    callback = () => { }
) => {
    if (!groupedUrl.length) {
        callback()
        return groupedUrl
    }
    const newGroupedUrl = groupedUrl.map(fn => fn())
    const resultsMapper = (results) => results.map(callback)
    const data = await Promise.allSettled(newGroupedUrl).then(resultsMapper)
    return data;
}

接下來就是主函數

const sendRequest = async (
    urls = [],
    max = 0,
    callback = () => { }
) => {
    if (!urls.length) {
        return urls
    }
    const groupedUrls = group(urls, max)
    const results = []
    console.log('start !')
    for (let groupedUrl of groupedUrls) {
        try {
            const result = await requestHandler(groupedUrl, callback)
            results.push(result)
            console.log('go')
        } catch { }
    }
    console.log('done !')
    return results
}

這裏就是利用了for + async + await來限制併發。等每次併發任務結果出來之後再執行下一次的任務。

我們執行下栗子：

const p1 = () => new Promise((resolve, reject) => setTimeout(reject, 1000, 'p1'))
const p2 = () => Promise.resolve(2)
const p3 = () => new Promise((resolve, reject) => setTimeout(resolve, 2000, 'p3'))
const p4 = () => Promise.resolve(4)
const p5 = () => new Promise((resolve, reject) => setTimeout(reject, 2000, 'p5'))
const p6 = () => Promise.resolve(6)
const p7 = () => new Promise((resolve, reject) => setTimeout(resolve, 1000, 'p7'))
const p8 = () => Promise.resolve(8)
const p9 = () => new Promise((resolve, reject) => setTimeout(reject, 1000, 'p9'))
const p10 = () => Promise.resolve(10)
const p11 = () => new Promise((resolve, reject) => setTimeout(resolve, 2000, 'p10'))
const p12 = () => Promise.resolve(12)
const p13 = () => new Promise((resolve, reject) => setTimeout(reject, 1000, 'p11'))
const p14 = () => Promise.resolve(14)

const ps = [p1, p2, p3, p4, p5, p6, p7, p8, p9, p10, p11, p12, p13, p14]
sendRequest(ps, 3, ({reason, value}) => {
    console.log(reason || value)
})

OK，我們看到結果是如我們所願的

後記

如果你喜歡探討技術，或者對本文有任何的意見或建議，非常歡迎加魚頭微信好友一起探討，當然，魚頭也非常希望能跟你一起聊生活，聊愛好，談天說地。
魚頭的微信號是：krisChans95
也可以掃碼關注公衆號，訂閱更多精彩內容。