快捷導(dǎo)航

深入理解JS中的Promise.race控制并發(fā)量

更新時間：2023年04月06日 09:35:19 作者：頭疼腦脹的代碼搬運(yùn)工

這篇文章主要為大家介紹了JS中的Promise.race控制并發(fā)量的深入理解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

開篇

比如在開發(fā)中會進(jìn)行一系列的網(wǎng)絡(luò)請求，但是有些情況需要控制一下網(wǎng)絡(luò)請求請并發(fā)量。這里簡單的用 Promise.race 及 await 的特性來理解一下，如何對任務(wù)的并發(fā)量進(jìn)行控制。

一、Promise.race

Promise.race 作用就是將多個異步任務(wù)包裹起來，當(dāng)有一個完成的話，那么就會觸發(fā) then 事件。除了這個不錯的特性方法外，await 這個關(guān)鍵字也比較有用，可以這樣理解，await 后面的代碼其實(shí)就相當(dāng)于在 Promise 的 then 事件，即：如果異步任務(wù)沒有完成的話，await 后面的邏輯是不會執(zhí)行的，可以聯(lián)想一下 generator 生成器里面的 yield 它能直接控制方法體里面的代碼執(zhí)行跟暫停，外界由一個迭代器 next 方法進(jìn)行操控。

await 雖然好用，也只是在一個“異步”方法里需要“同步執(zhí)行”的時候。then 的異步回調(diào)，其實(shí)也有它的用處?？梢詫⑼耆魂P(guān)心的事務(wù)放到里面，由它去執(zhí)行到最后的結(jié)果。

二、并發(fā)效果展示

三、代碼

class ConcurrencyTask {
    // 回調(diào)
    callBack = ()=>{}
    // 任務(wù)
    task = ()=>{}
    // 異步任務(wù)
    promse = null
    constructor(task,callBack){
        this.task = task
        this.callBack = callBack
    }
    // 開始進(jìn)行任務(wù)
    beginExecuteTask(){
        this.promse = new Promise((resolve, reject)=>{
            this.task(resolve,reject)
        })
        return this.promse
    }
    // 類方法初始化
    static SimulationTask(time){
        return new ConcurrencyTask((resolve, _)=>{
                console.log('開始執(zhí)行延時任務(wù)：' + (time / 1000) + '秒！')
                setTimeout(()=>{
                    resolve('延時任務(wù)完成：' + (time / 1000) + '秒！')
                },time)
            },(res)=>{
                console.log(res)
        })
    }
}
class ConcurrencyQueue {
    // 最大并發(fā)數(shù)
    maxConcurrencyNum = 1
    // 并發(fā)任務(wù)集合
    concurrencyTasks = []
    // 正在進(jìn)行的任務(wù)
    executionTasks = []
    constructor(maxConcurrencyNum,...concurrencyTasks){
        this.maxConcurrencyNum = maxConcurrencyNum
        concurrencyTasks.forEach((task)=>{
            this.concurrencyTasks.push(task)
        })
    }
    // 開始執(zhí)行
    async beginExecuteTasks(){
        // 當(dāng)前執(zhí)行任務(wù)
        this.executionTasks = []
        // 全部任務(wù)
        let allExecutionTasks = []
        for(let index = 0;index < this.concurrencyTasks.length;index ++){
            let task = this.concurrencyTasks[index]
            // 開始并進(jìn)行后續(xù)追蹤
            task.beginExecuteTask().then((res)=>{
                this.executionTasks.splice(this.executionTasks.indexOf(task),1)
                if(task.callBack){
                    task.callBack(res)
                }
            })
            // 不足直接添加
            if(this.executionTasks.length < this.maxConcurrencyNum){
                //待執(zhí)行任務(wù)集合添加
                this.executionTasks.push(task)
                //全任務(wù)執(zhí)行集合添加
                allExecutionTasks.push(task)
                if((this.concurrencyTasks.length - 1) == index || this.executionTasks.length >= this.maxConcurrencyNum){
                    // 滿足直接運(yùn)行
                    await Promise.race(this.executionTasks.map((task)=>{ return task.promse }))
                }
            }
        }
        //全部任務(wù)完成
        await Promise.all(allExecutionTasks.map((task)=>{ return task.promse }))
        console.log('任務(wù)全部完成')
    }
}
export { ConcurrencyTask ,ConcurrencyQueue }

ESM 模式導(dǎo)入，需要 node 簡單起一個服務(wù)

<script type="module">
    import { ConcurrencyTask ,ConcurrencyQueue } from "./concurrencyTask.js"
    //添加任務(wù)
    let concurrencyQueue = new ConcurrencyQueue(3,ConcurrencyTask.SimulationTask(1000),ConcurrencyTask.SimulationTask(6000),ConcurrencyTask.SimulationTask(5000),ConcurrencyTask.SimulationTask(4000),ConcurrencyTask.SimulationTask(2000),ConcurrencyTask.SimulationTask(3000))
    //開始執(zhí)行任務(wù)
    concurrencyQueue.beginExecuteTasks()
</script>