• Author: Chen Da Yu Tou
  • Initial address: github.com/KRISACHAN/y…
  • Description: fish head learning records

The body of the

I saw this question on the Internet:

What is Time Slicing? It’s similar, but this time it limits the number of asynchronous concurrency.

So without saying more, we first come to Kangkang implementation

First let’s implement an array partition function ~

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
}
Copy the code

Here we split the array based on the specified number of concurrent requests. It’s basically for + slice, there’s nothing to say

Next we have a request collection wrapper with async + await.

We execute each set of requests through Promise.allSettled.

Promise.allsettled is a new API that uses the same array as Promise.all, but will not return the result until all tasks are finished. Promise. All with a reject returns the result.

const requestHandler = async (
    groupedUrl = [],
    callback = (a)= >{}) => {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;
}
Copy the code

And then we have our pivot function

const sendRequest = async (
    urls = [],
    max = 0,
    callback = (a)= >{}) => {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
}
Copy the code

“For + async + await” is used to limit concurrency. Wait for the results of each concurrent task before executing the next one.

Let’s execute chestnut:

const p1 = (a)= > new Promise((resolve, reject) = > setTimeout(reject, 1000.'p1'))
const p2 = (a)= > Promise.resolve(2)
const p3 = (a)= > new Promise((resolve, reject) = > setTimeout(resolve, 2000.'p3'))
const p4 = (a)= > Promise.resolve(4)
const p5 = (a)= > new Promise((resolve, reject) = > setTimeout(reject, 2000.'p5'))
const p6 = (a)= > Promise.resolve(6)
const p7 = (a)= > new Promise((resolve, reject) = > setTimeout(resolve, 1000.'p7'))
const p8 = (a)= > Promise.resolve(8)
const p9 = (a)= > new Promise((resolve, reject) = > setTimeout(reject, 1000.'p9'))
const p10 = (a)= > Promise.resolve(10)
const p11 = (a)= > new Promise((resolve, reject) = > setTimeout(resolve, 2000.'p10'))
const p12 = (a)= > Promise.resolve(12)
const p13 = (a)= > new Promise((resolve, reject) = > setTimeout(reject, 1000.'p11'))
const p14 = (a)= > 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)
})
Copy the code

OK, we see that the results are what we expected

Afterword.

If you like to discuss technology, or have any comments or suggestions on this article, you are welcome to add yu Tou wechat friends to discuss. Of course, Yu Tou also hopes to talk about life, hobbies and things with you. You can also scan your wechat account to subscribe to more exciting content.