快捷導(dǎo)航

JS異步任務(wù)的并行、串行及二者結(jié)合用法

更新時間：2023年10月27日 09:13:56 作者：路澤宇

讓多個異步任務(wù)按照我們的想法執(zhí)行，是開發(fā)中常見的需求，今天我們就來捋一下，如何讓多個異步任務(wù)并行，串行，以及并行串行相結(jié)合，感興趣的朋友跟隨小編一起看看吧

一、并行

并行是使用最多的方式，多個相互間沒有依賴關(guān)系的異步任務(wù)，并行執(zhí)行能夠提高效率。

我們最經(jīng)常用的，是Promise.all() 。

function f1() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log('1結(jié)束');
            resolve();
        }, 1000)
    });
}
function f2() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log('2結(jié)束');
            resolve();
        }, 900)
    });
}
function f3() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log('3結(jié)束');
            resolve();
        }, 800)
    });
}

let arr = [f1, f2, f3];
Promise.all(arr.map(i => i()));
// 3結(jié)束
// 2結(jié)束
// 1結(jié)束

以下幾種數(shù)組遍歷方式，同樣可以實現(xiàn)并行。

// forEach遍歷
arr.forEach(item => {
    item();
});
// for循環(huán)
for (let i = 0; i < arr.length; i++) {
    arr[i]();
}
// for...of遍歷
for (let item of arr) {
    item();
}

// 注意，以下兩種寫法同樣是并行的
arr.forEach(async item => await item());

async function f() {
    arr.forEach(async item => await item())
}
f();

相比之下，Promise.all()可以確保任務(wù)都執(zhí)行成功，然后再執(zhí)行后續(xù)操作，這是各種遍歷無法做到的。

另外，還有一種方式也能實現(xiàn)并行：Promise.allSettled()。

Promise.allSettled(arr.map(i => i()));

這種方式很特別，它無法得到每個Promise對象的返回值，卻可以精確得知每個任務(wù)的成功還是失敗。如果你有這樣的需求場景，用Promise.allSettled()就很合適。

二、串行

我在工作中遇到過一個場景，一個有1000+元素的數(shù)組，每個成員都是調(diào)用第三方接口的Promise對象。我像往常一樣得意的使用Promise.all()，等著1000多個任務(wù)瞬間完成。然而，結(jié)果卻讓我大跌眼鏡，這1000多個任務(wù)，只有一部分成功了，大部分都報錯了。不管我執(zhí)行幾次，結(jié)果都是這個樣。一籌莫展之后，我才從第三方那兒得知，他們的接口是有調(diào)用限制的，一個接口同一時間只能并行300個。

有沒有辦法能讓它們一個接一個的執(zhí)行呢？也就是串行。

nodejs koa框架的next()語法給了我啟發(fā)，它就是讓中間件一個接一個的執(zhí)行。于是我想出了遞歸的方式：

async function serial(arr) {
    let item = arr.shift();

    await item();
    if (arr.length > 0) {
        await serial(arr);
    }
}
serial(arr);
// 1結(jié)束
// 2結(jié)束
// 3結(jié)束

其實，想讓異步任務(wù)串行，不用這么麻煩。以下遍歷的方式，同樣可以實現(xiàn)串行。

// 使用for...of
async function f() {
    for (let item of arr) {
        await item();
    }
}
f();

// 使用for循環(huán)
async function f() {
    for (let i = 0; i < arr.length; i++) {
        await arr[i]();
    }
}
f();

發(fā)現(xiàn)了沒？為什么同樣是for循環(huán)，同樣是for...of，前面的寫法是并行，后面就成了串行呢？

工作中，我們一定做過這樣的嘗試，想通過遍歷，來讓多個異步任務(wù)串行。但往往不得其法，怎么折騰它們都還是同時執(zhí)行。

后一種寫法，你可以理解為：await執(zhí)行完成后，才會進(jìn)入下一次循環(huán)。其實，遍歷，就相當(dāng)于把每一個元素，在代碼中從上到下寫下來。當(dāng)它們處于async函數(shù)中，并在每個元素前面加await，它們自然就能順序執(zhí)行。否則，我們都知道，簡單的順序?qū)懴聛淼漠惒饺蝿?wù)，它們還是同時執(zhí)行的。

好了，現(xiàn)在程序不報錯了。但是，1000多個任務(wù)依次執(zhí)行完成，足足花了十多分鐘，太慢了！有沒有辦法，又快又不觸發(fā)接口調(diào)用限制呢？

有，如果可以并行200個任務(wù)，完成后再開始下一輪200個......也就是，把并行和串行相結(jié)合。

三、并行串行結(jié)合

async function bingChuan(arr, num) {
    let items = arr.splice(0, num);
    
    await Promise.all(items.map(i => i()));
    if (arr.length > 0) {
        await bingChuan(arr, num);
    }
}
bingChuan(arr, 2);
// 2結(jié)束
// 1結(jié)束
// 3結(jié)束

好了，現(xiàn)在可以同時享有并行和串行的好處了！

到此這篇關(guān)于JS異步任務(wù)的并行、串行，以及二者結(jié)合的文章就介紹到這了,更多相關(guān)js異步任務(wù)并行內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: