js 多個異步 的並發控制

 

　　今天在群里看到一個人發的面試題：　　

1，請實現如下的函數，可以批量請求數據，所有的URL地址在urls參數中，同時可以通過max參數 控制請求的並發度。當所有的請求結束后，需要執行callback回調。發請求的函數可以直接使用fetch。

function sendRequest (urls: string[], max: number, callback: () => void) { }

 

　　　　fetch 函數返回的是一個promise，promise對象在實例化的時候就已經開始執行了。

 

　　　　

function sendRequest(arr, max, callback) {
        let fetchArr = [],  // 存儲並發max的promise數組
            i = 0;

        function toFetch() {
            if (i === arr.length) {   // 所有的都處理完了， 返回一個resolve
                return Promise.resolve();
            }

            let one = fetch(arr[i++]); // 取出第i個url， 放入fetch里面 , 每取一次i++
            one.then( () => {fetchArr.splice(fetchArr.indexOf(one), 1)}); // 當promise執行完畢后，從數組刪除
            fetchArr.push(one);  //將當前的promise存入並發數組中       其實將這個push放到上一行會更好理解，那樣就是我們同步的思維順序，先push進去，再等promise執行完了之后再刪除。  但由於then是異步的，所以怎么放都可以。

            let p = Promise.resolve();
            if (fetchArr.length >= max) {     // 當並行數量達到最大后， 用race比較 第一個完成的， 然后再調用一下函數自身。
                p = Promise.race(fetchArr);
            }
            return p.then(() => toFetch());
        }
        
        // arr循環完后， 現在fetchArr里面剩下最后max個promise對象， 使用all等待所有的都完成之后執行callback
        toFetch().then(() => Promise.all(fetchArr)).then(() => {
            callback();
        })
}