Promise對(duì)象代表了一個(gè)異步操作的最終結(jié)果，它可以是一個(gè)值或一個(gè)錯(cuò)誤。Promise提供了一個(gè)更加優(yōu)雅的方式來(lái)處理異步代碼，避免了回調(diào)地獄（Callback Hell）。

2. Promise鏈?zhǔn)秸{(diào)用

Promise允許我們使用.then()方法將多個(gè)異步操作串聯(lián)在一起，形成一個(gè)鏈?zhǔn)秸{(diào)用。這使得代碼更易于閱讀和維護(hù)。例如：

fetchData()
  .then(processData)
  .then(displayData)
  .catch(handleError);

在上面的示例中，每個(gè).then()返回一個(gè)新的Promise，允許我們按順序執(zhí)行異步任務(wù)，并使用.catch()來(lái)處理錯(cuò)誤。

創(chuàng)建ConcurrentPromise

為了實(shí)現(xiàn)并發(fā)任務(wù)控制，我們將創(chuàng)建一個(gè)名為ConcurrentPromise的自定義Promise類。這個(gè)類將允許我們控制同時(shí)運(yùn)行的任務(wù)數(shù)量。

1. ConcurrentPromise的結(jié)構(gòu)

首先，讓我們定義ConcurrentPromise類的結(jié)構(gòu)。它需要以下屬性：

• concurrency：允許同時(shí)運(yùn)行的任務(wù)數(shù)量。
• queue：任務(wù)隊(duì)列，存儲(chǔ)等待執(zhí)行的任務(wù)。
• running：當(dāng)前正在執(zhí)行的任務(wù)數(shù)量。

2. 添加任務(wù)到隊(duì)列

下一步是實(shí)現(xiàn)add方法，該方法用于將任務(wù)添加到隊(duì)列中。這個(gè)方法將返回一個(gè)Promise，以便在任務(wù)完成時(shí)進(jìn)行處理。

add(task) {
  return new Promise((resolve, reject) => {
    const execute = async () => {
      try {
        const result = await task();
        resolve(result);
      } catch (error) {
        reject(error);
      } finally {
        this.running--;
        this.runNext(); // 執(zhí)行下一個(gè)任務(wù)
      }
    };
    if (this.running < this.concurrency) {
      this.running++;
      execute();
    } else {
      this.queue.push(execute);
    }
  });
}

在上面的代碼中，我們首先定義了一個(gè)execute函數(shù)，它執(zhí)行任務(wù)并處理結(jié)果。如果當(dāng)前正在執(zhí)行的任務(wù)數(shù)量小于concurrency，則任務(wù)將立即執(zhí)行，否則它將被放入隊(duì)列中等待執(zhí)行。任務(wù)完成后，我們減少running計(jì)數(shù)并調(diào)用runNext方法以執(zhí)行隊(duì)列中的下一個(gè)任務(wù)。

3. 執(zhí)行下一個(gè)任務(wù)

要執(zhí)行隊(duì)列中的下一個(gè)任務(wù)，我們需要實(shí)現(xiàn)runNext方法：

runNext() {
  if (this.queue.length > 0 && this.running < this.concurrency) {
    const task = this.queue.shift();
    this.running++;
    task();
  }
}

runNext方法檢查隊(duì)列是否還有等待執(zhí)行的任務(wù)，并且當(dāng)前運(yùn)行的任務(wù)數(shù)量是否小于concurrency。如果是，它將從隊(duì)列中取出下一個(gè)任務(wù)并執(zhí)行。

使用ConcurrentPromise

現(xiàn)在，讓我們看看如何使用ConcurrentPromise來(lái)控制并發(fā)執(zhí)行的任務(wù)數(shù)量。

1. 模擬異步任務(wù)

首先，我們將創(chuàng)建一個(gè)簡(jiǎn)單的異步任務(wù)，模擬文件下載操作：

function downloadFile(file) {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log(`Downloaded ${file}`);
      resolve(file);
    }, Math.random() * 1000);
  });
}

downloadFile函數(shù)會(huì)隨機(jī)模擬文件下載，并在下載完成時(shí)返回文件名。

2. 創(chuàng)建ConcurrentPromise實(shí)例

現(xiàn)在，我們將創(chuàng)建一個(gè)ConcurrentPromise實(shí)例，將最大并發(fā)數(shù)設(shè)置為2：

const concurrentPromise = new ConcurrentPromise(2);

這意味著我們可以同時(shí)執(zhí)行最多兩個(gè)下載任務(wù)。

3. 創(chuàng)建任務(wù)列表

接下來(lái)，我們創(chuàng)建一個(gè)文件列表，并將下載任務(wù)添加到ConcurrentPromise中：

const files = ['file1', 'file2', 'file3', 'file4', 'file5'];
const downloadTasks = files.map((file) => () => downloadFile(file));
downloadTasks.forEach((task) => {
  concurrentPromise.add(task)
    .then((result) => {
      console.log(`Task completed: ${result}`);
    })
    .catch((error) => {
      console.error(`Task failed: ${error}`);
    });
});

在上述代碼中，我們使用map方法將下載任務(wù)函數(shù)封裝成一個(gè)數(shù)組，并將每個(gè)任務(wù)添加到ConcurrentPromise中。我們還使用.then()和.catch()來(lái)處理任務(wù)完成和失敗的情況。

4. 結(jié)果

由于我們?cè)O(shè)置了最大并發(fā)數(shù)為2，任務(wù)將會(huì)按照最多兩個(gè)同時(shí)執(zhí)行。這意味著不會(huì)有超過(guò)兩個(gè)任務(wù)同時(shí)下載文件，從而有效地控制了并發(fā)性。

總結(jié)

本文深入探討了JavaScript中的并發(fā)任務(wù)控制，并介紹了如何創(chuàng)建一個(gè)自定義Promise類——ConcurrentPromise，來(lái)實(shí)現(xiàn)這一目標(biāo)。我們首先理解了Promise的基本概念，包括Promise的狀態(tài)和鏈?zhǔn)?/p>

以上就是詳解如何使用JavaScript Promise類實(shí)現(xiàn)并發(fā)任務(wù)控制的詳細(xì)內(nèi)容，更多關(guān)于JavaScript Promise并發(fā)任務(wù)控制的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！