JS中的Promise.race控制并發量應用

這篇文章主要講解了“JS中的Promise.race控制并發量應用”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“JS中的Promise.race控制并發量應用”吧！

一、Promise.race

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

await 雖然好用，也只是在一個“異步”方法里需要“同步執行”的時候。then 的異步回調，其實也有它的用處。可以將完全不關心的事務放到里面，由它去執行到最后的結果。

二、并發效果展示

三、代碼

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

ESM 模式導入，需要 node 簡單起一個服務

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

感謝各位的閱讀，以上就是“JS中的Promise.race控制并發量應用”的內容了，經過本文的學習后，相信大家對JS中的Promise.race控制并發量應用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！