동시성 제어란 무엇입니까? JavaScript에서 동시성 제어를 구현하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

동시성 제어란 무엇입니까? JavaScript에서 동시성 제어를 구현하는 방법은 무엇입니까?

일상적인 개발 과정에서 동시 요청 수 제어와 같은 동시성 제어 시나리오를 접할 수 있습니다. 그렇다면 JavaScript에서 동시성 제어를 구현하는 방법은 무엇입니까? 이 질문에 답하기 전에 동시성 제어에 대해 간략하게 소개하겠습니다.

실행할 작업이 6개 있고 동시에 실행할 수 있는 작업 수를 제한하고 싶다고 가정합니다. 즉, 동시에 실행할 수 있는 작업은 최대 2개입니다. Executing Task List의 작업이 완료되면 프로그램은 자동으로 To-Do Task List에서 새 할 일을 가져와 Executing Task List에 추가합니다. 위의 과정을 모두가 좀 더 직관적으로 이해할 수 있도록 아바고는 의도적으로 다음 3개의 그림을 그렸습니다.

1.1 Phase One

동시성 제어란 무엇입니까? JavaScript에서 동시성 제어를 구현하는 방법은 무엇입니까?

1.2 Phase Two

동시성 제어란 무엇입니까? JavaScript에서 동시성 제어를 구현하는 방법은 무엇입니까?

1.3 Phase Three

동시성 제어란 무엇입니까? JavaScript에서 동시성 제어를 구현하는 방법은 무엇입니까?

자, 동시성 제어를 소개한 후 Abao 형제는 Github의 async-pool 라이브러리를 사용하여 비동기 작업 동시성 제어의 구체적인 구현을 소개할 것입니다.

async-pool: https://github.com/rxaviers/async-pool

네이티브 ES6/ES7을 사용하여 제한된 동시성으로 여러 약속 반환 및 비동기 기능을 실행하세요.

2. 동시성 제어 구현

async-pool 이 라이브러리는 ES7과 ES6의 두 가지 구현 버전을 제공합니다. 구체적인 구현을 분석하기 전에 사용 방법을 살펴보겠습니다.

2.1 asyncPool 사용

const timeout = i => new Promise(resolve => setTimeout(() => resolve(i), i));
await asyncPool(2, [1000, 5000, 3000, 2000], timeout);

로그인 후 복사

위 코드에서는 async-pool 라이브러리에서 제공하는 asyncPool 함수를 사용하여 비동기 작업의 동시성 제어를 구현했습니다. asyncPool 함수의 서명은 다음과 같습니다: asyncPool 函数来实现异步任务的并发控制。 asyncPool 函数的签名如下所示：

function asyncPool(poolLimit, array, iteratorFn){ ... }

로그인 후 복사

该函数接收 3 个参数：

poolLimit（数字类型）：表示限制的并发数；
array（数组类型）：表示任务数组；
iteratorFn（函数类型）：表示迭代函数，用于实现对每个任务项进行处理，该函数会返回一个 Promise 对象或异步函数。

对于以上示例来说，在使用了 asyncPool 函数之后，对应的执行过程如下所示：

const timeout = i => new Promise(resolve => setTimeout(() => resolve(i), i));
await asyncPool(2, [1000, 5000, 3000, 2000], timeout);
// Call iterator (i = 1000)
// Call iterator (i = 5000)
// Pool limit of 2 reached, wait for the quicker one to complete...
// 1000 finishes
// Call iterator (i = 3000)
// Pool limit of 2 reached, wait for the quicker one to complete...
// 3000 finishes
// Call iterator (i = 2000)
// Itaration is complete, wait until running ones complete...
// 5000 finishes
// 2000 finishes
// Resolves, results are passed in given array order `[1000, 5000, 3000, 2000]`.

로그인 후 복사

通过观察以上的注释信息，我们可以大致地了解 asyncPool 函数内部的控制流程。下面我们先来分析 asyncPool 函数的 ES7 实现。

关注「全栈修仙之路」阅读阿宝哥原创的 4 本免费电子书（累计下载 3万+）及 50 几篇 TS 系列教程。

2.2 asyncPool ES7 实现

async function asyncPool(poolLimit, array, iteratorFn) {
  const ret = []; // 存储所有的异步任务
  const executing = []; // 存储正在执行的异步任务
  for (const item of array) {
    // 调用iteratorFn函数创建异步任务
    const p = Promise.resolve().then(() => iteratorFn(item, array));
    ret.push(p); // 保存新的异步任务

    // 当poolLimit值小于或等于总任务个数时，进行并发控制
    if (poolLimit <= array.length) {
      // 当任务完成后，从正在执行的任务数组中移除已完成的任务
      const e = p.then(() => executing.splice(executing.indexOf(e), 1));
      executing.push(e); // 保存正在执行的异步任务
      if (executing.length >= poolLimit) {
        await Promise.race(executing); // 等待较快的任务执行完成
      }
    }
  }
  return Promise.all(ret);
}

로그인 후 복사

在以上代码中，充分利用了 Promise.all 和 Promise.race 函数特点，再结合 ES7 中提供的 async await 特性，最终实现了并发控制的功能。利用 await Promise.race(executing); 这行语句，我们会等待 正在执行任务列表 中较快的任务执行完成之后，才会继续执行下一次循环。

asyncPool ES7 实现相对比较简单，接下来我们来看一下不使用 async await 特性要如何实现同样的功能。

2.3 asyncPool ES6 实现

function asyncPool(poolLimit, array, iteratorFn) {
  let i = 0;
  const ret = []; // 存储所有的异步任务
  const executing = []; // 存储正在执行的异步任务
  const enqueue = function () {
    if (i === array.length) {
      return Promise.resolve();
    }
    const item = array[i++]; // 获取新的任务项
    const p = Promise.resolve().then(() => iteratorFn(item, array));
    ret.push(p);

    let r = Promise.resolve();

    // 当poolLimit值小于或等于总任务个数时，进行并发控制
    if (poolLimit <= array.length) {
      // 当任务完成后，从正在执行的任务数组中移除已完成的任务
      const e = p.then(() => executing.splice(executing.indexOf(e), 1));
      executing.push(e);
      if (executing.length >= poolLimit) {
        r = Promise.race(executing); 
      }
    }
 
    // 正在执行任务列表 中较快的任务执行完成之后，才会从array数组中获取新的待办任务
    return r.then(() => enqueue());
  };
  return enqueue().then(() => Promise.all(ret));
}

로그인 후 복사

在 ES6 的实现版本中，通过内部封装的 enqueue 函数来实现核心的控制逻辑。当 Promise.race(executing) 返回的 Promise 对象变成已完成状态时，才会调用 enqueue 函数，从 array 数组中获取新的待办任务。

三、阿宝哥有话说

在 asyncPool 这个库的 ES7 和 ES6 的具体实现中，我们都使用到了 Promise.all 和 Promise.race 函数。其中手写 Promise.all 是一道常见的面试题。刚好趁着这个机会，阿宝哥跟大家一起来手写简易版的 Promise.all 和 Promise.race

Promise.all = function (iterators) {
  return new Promise((resolve, reject) => {
    if (!iterators || iterators.length === 0) {
      resolve([]);
    } else {
      let count = 0; // 计数器，用于判断所有任务是否执行完成
      let result = []; // 结果数组
      for (let i = 0; i < iterators.length; i++) {
        // 考虑到iterators[i]可能是普通对象，则统一包装为Promise对象
        Promise.resolve(iterators[i]).then(
          (data) => {
            result[i] = data; // 按顺序保存对应的结果
            // 当所有任务都执行完成后，再统一返回结果
            if (++count === iterators.length) {
              resolve(result);
            }
          },
          (err) => {
            reject(err); // 任何一个Promise对象执行失败，则调用reject()方法
            return;
          }
        );
      }
    }
  });
};

로그인 후 복사

함수는 3개의 매개변수를 받습니다: 🎜

poolLimit(숫자 유형): 동시성 제한 ;
array(배열 유형): 작업 배열을 나타냅니다.
iteratorFn(함수 유형): 반복 함수, 각 작업 항목의 처리를 구현하기 위해 이 함수는 Promise 객체 또는 비동기 함수를 반환합니다.

🎜위의 예에서 asyncPool 함수를 사용한 후 해당 실행 과정은 다음과 같습니다. 🎜

Promise.race = function (iterators) {
  return new Promise((resolve, reject) => {
    for (const iter of iterators) {
      Promise.resolve(iter)
        .then((res) => {
          resolve(res);
        })
        .catch((e) => {
          reject(e);
        });
    }
  });
};

로그인 후 복사

🎜위의 주석 정보를 보면 대략적으로 다음과 같은 내용을 이해할 수 있습니다. asyncPool 함수 내부의 제어 흐름. 먼저 asyncPool 함수의 ES7 구현을 분석해 보겠습니다. 🎜🎜🎜"풀 스택 불멸의 길"을 팔로우하고 A Bao 형제가 처음 제작한 무료 전자책 4권(총 30,000회 이상 다운로드)과 50개 이상의 TS 시리즈 튜토리얼을 읽어보세요. 🎜🎜

2.2 asyncPool ES7 구현🎜rrreee🎜위 코드에서는 `Promise.all` 및 `Promise.race`가 완전히 활용됩니다. ES7에서 제공하는 `async wait` 기능과 결합된 함수 기능이 마침내 동시성 제어 기능을 구현합니다. `await Promise.race(executing);` 명령문 줄을 사용하여 다음 루프 실행을 계속하기 전에 🎜Executing 작업 목록🎜에서 더 빠른 작업이 완료될 때까지 기다립니다. 🎜🎜asyncPool ES7의 구현은 비교적 간단합니다. 다음으로 `asyncawait` 기능을 사용하지 않고 동일한 기능을 구현하는 방법을 살펴보겠습니다. 🎜

2.3 asyncPool ES6 구현🎜rrreee🎜ES6 구현 버전에서는 핵심 제어 로직이 내부적으로 캡슐화된 `enqueue` 함수를 통해 구현됩니다. `Promise.race(executing)`에서 반환된 `Promise` 객체가 완료되면 `배열 <code>에서 <code>enqueue` 함수가 호출됩니다. /code> 배열에서 새로운 할 일을 가져옵니다. 🎜

3. Abao 형제가 할 말이 있습니다🎜🎜`asyncPool` 라이브러리의 ES7 및 ES6의 특정 구현에서 우리는 모두 `Promise를 사용합니다. .all` 및 `Promise.race` 함수. 그중에서도 손으로 쓰는 `Promise.all`은 흔한 면접 질문이다. 이 기회를 이용하여 A Bao 형제는 모든 사람과 함께 `Promise.all` 및 `Promise.race` 기능의 간단한 버전을 손으로 작성했습니다. 🎜

3.1 手写 Promise.all

Promise.all(iterable) 方法会返回一个 promise 对象，当输入的所有 promise 对象的状态都变成 resolved 时，返回的 promise 对象就会以数组的形式，返回每个 promise 对象 resolve 后的结果。当输入的任何一个 promise 对象状态变成 rejected 时，则返回的 promise 对象会 reject 对应的错误信息。

Promise.all = function (iterators) {
  return new Promise((resolve, reject) => {
    if (!iterators || iterators.length === 0) {
      resolve([]);
    } else {
      let count = 0; // 计数器，用于判断所有任务是否执行完成
      let result = []; // 结果数组
      for (let i = 0; i < iterators.length; i++) {
        // 考虑到iterators[i]可能是普通对象，则统一包装为Promise对象
        Promise.resolve(iterators[i]).then(
          (data) => {
            result[i] = data; // 按顺序保存对应的结果
            // 当所有任务都执行完成后，再统一返回结果
            if (++count === iterators.length) {
              resolve(result);
            }
          },
          (err) => {
            reject(err); // 任何一个Promise对象执行失败，则调用reject()方法
            return;
          }
        );
      }
    }
  });
};

로그인 후 복사

需要注意的是对于 Promise.all 的标准实现来说，它的参数是一个可迭代对象，比如 Array、String 或 Set 等。

3.2 手写 Promise.race

Promise.race(iterable) 方法会返回一个 promise 对象，一旦迭代器中的某个 promise 对象 resolved 或 rejected，返回的 promise 对象就会 resolve 或 reject 相应的值。

Promise.race = function (iterators) {
  return new Promise((resolve, reject) => {
    for (const iter of iterators) {
      Promise.resolve(iter)
        .then((res) => {
          resolve(res);
        })
        .catch((e) => {
          reject(e);
        });
    }
  });
};

로그인 후 복사

本文阿宝哥带大家详细分析了 async-pool 异步任务并发控制的具体实现，同时为了让大家能够更好地理解 async-pool 的核心代码。最后阿宝哥还带大家一起手写简易版的 Promise.all 和 Promise.race 函数。其实除了 Promise.all 函数之外，还存在另一个函数 —— Promise.allSettled，该函数用于解决 Promise.all 存在的问题，感兴趣的小伙伴可以自行研究一下。