快捷導(dǎo)航

Promise面試題詳解之控制并發(fā)

更新時(shí)間：2021年05月14日 11:43:50 作者：童紅雷

promise面試中經(jīng)常會(huì)遇到的一個(gè)問(wèn)題就是關(guān)于控制并發(fā)的，所以下面這篇文章主要給大家介紹了關(guān)于Promise面試題之控制并發(fā)的相關(guān)資料，需要的朋友可以參考下

前言

在寫(xiě)這篇文章的時(shí)候我有點(diǎn)猶豫，因?yàn)橄惹皩?xiě)過(guò)一篇類(lèi)似的，一道關(guān)于并發(fā)控制的面試題，只不過(guò)那篇文章只給出了一種解決方案，后來(lái)在網(wǎng)上又陸續(xù)找到兩種解決方案，說(shuō)來(lái)慚愧，研究問(wèn)題總是淺嘗輒止，所以今天便放在一起，借著這道面試題再重新梳理一下。

題目是這樣的：

有 8 個(gè)圖片資源的 url，已經(jīng)存儲(chǔ)在數(shù)組 urls 中（即urls = [‘http://example.com/1.jpg', …., ‘http://example.com/8.jpg']），而且已經(jīng)有一個(gè)函數(shù) function loadImg，輸入一個(gè) url 鏈接，返回一個(gè) Promise，該 Promise 在圖片下載完成的時(shí)候 resolve，下載失敗則 reject。

但是我們要求，任意時(shí)刻，同時(shí)下載的鏈接數(shù)量不可以超過(guò) 3 個(gè)。

請(qǐng)寫(xiě)一段代碼實(shí)現(xiàn)這個(gè)需求，要求盡可能快速地將所有圖片下載完成。

已有代碼如下：

var urls = [
'https://www.kkkk1000.com/images/getImgData/getImgDatadata.jpg', 
'https://www.kkkk1000.com/images/getImgData/gray.gif', 
'https://www.kkkk1000.com/images/getImgData/Particle.gif', 
'https://www.kkkk1000.com/images/getImgData/arithmetic.png', 
'https://www.kkkk1000.com/images/getImgData/arithmetic2.gif', 
'https://www.kkkk1000.com/images/getImgData/getImgDataError.jpg', 
'https://www.kkkk1000.com/images/getImgData/arithmetic.gif', 
'https://www.kkkk1000.com/images/wxQrCode2.png'
];
function loadImg(url) {
    return new Promise((resolve, reject) => {
        const img = new Image()
        img.onload = function () {
            console.log('一張圖片加載完成');
            resolve();
        }
        img.onerror = reject
        img.src = url
    })
};

看到這個(gè)題目的時(shí)候，腦袋里瞬間想到了高效率排隊(duì)買(mǎi)地鐵票的情景，那個(gè)情景類(lèi)似下圖：

上圖這樣的排隊(duì)和并發(fā)請(qǐng)求的場(chǎng)景基本類(lèi)似，窗口只有三個(gè)，人超過(guò)三個(gè)之后，后面的人只能排隊(duì)了。

首先想到的便是利用遞歸來(lái)做，就如這篇文章采取的措施一樣，代碼如下：

//省略代碼

var count = 0;
//對(duì)加載圖片的函數(shù)做處理，計(jì)數(shù)器疊加計(jì)數(shù)
function bao(){
    count++;
    console.log("并發(fā)數(shù):",count)
    //條件判斷，urls長(zhǎng)度大于0繼續(xù)，小于等于零說(shuō)明圖片加載完成
    if(urls.length>0&&count<=3){
    //shift從數(shù)組中取出連接
        loadImg(urls.shift()).then(()=>{
        //計(jì)數(shù)器遞減
            count--
            //遞歸調(diào)用
            }).then(bao)
    }
}
function async1(){
//循環(huán)開(kāi)啟三次
    for(var i=0;i<3;i++){
        bao();
    }
}
async1()

以上是最常規(guī)的思路，我將加載圖片的函數(shù)loadImg封裝在bao函數(shù)內(nèi)，根據(jù)條件判斷，是否發(fā)送請(qǐng)求，請(qǐng)求完成后繼續(xù)遞歸調(diào)用。

以上代碼所有邏輯都寫(xiě)在了同一個(gè)函數(shù)中然后遞歸調(diào)用，可以?xún)?yōu)化一下，代碼如下：

var count = 0;

// 封裝請(qǐng)求的異步函數(shù),增加計(jì)數(shù)器功能
function request(){
    count++;
    loadImg(urls.shift()).then(()=>{
            count--
            }).then(diaodu)

    
}
// 負(fù)責(zé)調(diào)度的函數(shù)
function diaodu(){
    if(urls.length>0&&count<=3){
        request();
    }
}

function async1(){
    for(var i=0;i<3;i++){
        request();
    }
}
async1()

上面代碼將一個(gè)遞歸函數(shù)拆分成兩個(gè)，一個(gè)函數(shù)只負(fù)責(zé)計(jì)數(shù)和發(fā)送請(qǐng)求，另外一個(gè)負(fù)責(zé)調(diào)度。

這里的請(qǐng)求既然已經(jīng)被封裝成了Promise，那么我們用Promise和saync、await來(lái)完成一下，代碼如下：

//省略代碼

// 計(jì)數(shù)器
var count = 0;
// 全局鎖
var lock = [];
var l = urls.length;
async function bao(){
    if(count>=3){
        //超過(guò)限制利用await和promise進(jìn)行阻塞;
        let _resolve;
        await new Promise((resolve,reject)=>{
            _resolve=resolve;
            // resolve不執(zhí)行,將其推入lock數(shù)組;
            lock.push(_resolve);
        });
    }
    if(urls.length>0){
        console.log(count);
        count++
        await loadImg(urls.shift());
        count--;
        lock.length&&lock.shift()()
    }
}
for (let i = 0; i < l; i++) {
    bao();
}

大致思路是，遍歷執(zhí)行urls.length長(zhǎng)度的請(qǐng)求，但是當(dāng)請(qǐng)求并發(fā)數(shù)大于限制時(shí)，超過(guò)的請(qǐng)求用await結(jié)合promise將其阻塞，并且將resolve填充到lock數(shù)組中，繼續(xù)執(zhí)行，并發(fā)過(guò)程中有圖片加載完成后，從lock中推出一項(xiàng)resolve執(zhí)行，lock相當(dāng)于一個(gè)叫號(hào)機(jī)；

以上代碼可以?xún)?yōu)化為：

// 計(jì)數(shù)器
var count = 0;
// 全局鎖
var lock = [];
var l = urls.length;
// 阻塞函數(shù)
function block(){
    let _resolve;
    return  new Promise((resolve,reject)=>{
        _resolve=resolve;
        // resolve不執(zhí)行,將其推入lock數(shù)組;
        lock.push(_resolve);
    });
}
// 叫號(hào)機(jī)
function next(){
    lock.length&&lock.shift()()
}
async function bao(){
    if(count>=3){
        //超過(guò)限制利用await和promise進(jìn)行阻塞;
        await block();
    }
    if(urls.length>0){
        console.log(count);
        count++
        await loadImg(urls.shift());
        count--;
        next()
    }
}
for (let i = 0; i < l; i++) {
    bao();
}

最后一種方案，也是我十分喜歡的，思考好久才明白，大概思路如下：

用 Promise.race來(lái)實(shí)現(xiàn)，先并發(fā)請(qǐng)求3個(gè)圖片資源，這樣可以得到 3 個(gè) Promise實(shí)例，組成一個(gè)數(shù)組promises ，然后不斷的調(diào)用 Promise.race 來(lái)返回最快改變狀態(tài)的 Promise，然后從數(shù)組（promises ）中刪掉這個(gè) Promise 對(duì)象實(shí)例，再加入一個(gè)新的 Promise實(shí)例，直到全部的 url 被取完。

代碼如下：

//省略代碼
function limitLoad(urls, handler, limit) {
    // 對(duì)數(shù)組做一個(gè)拷貝
    const sequence = [].concat(urls)
    let promises = [];

    //并發(fā)請(qǐng)求到最大數(shù)
    promises = sequence.splice(0, limit).map((url, index) => {
        // 這里返回的 index 是任務(wù)在 promises 的腳標(biāo)，
        //用于在 Promise.race 之后找到完成的任務(wù)腳標(biāo)
        return handler(url).then(() => {
            return index
        });
    });

    (async function loop() {
        let p = Promise.race(promises);
        for (let i = 0; i < sequence.length; i++) {
            p = p.then((res) => {
                promises[res] = handler(sequence[i]).then(() => {
                    return res
                });
                return Promise.race(promises)
            })
        }
    })()
}
limitLoad(urls, loadImg, 3)

第三種方案的巧妙之處，在于使用了Promise.race。并且在循環(huán)時(shí)用then鏈串起了執(zhí)行順序。

以上便是關(guān)于并發(fā)控制的一點(diǎn)點(diǎn)思考，有使用promise的，有不使用promise的，關(guān)鍵在于靈活運(yùn)用，通過(guò)這次梳理，你有哪些思考呢