JavaScript 비동기 forEach

오늘 포스트에서는 JavaScript의 forEach 루프에서 async를 사용할 수 있는지 살펴보겠습니다. 대안은 무엇입니까?

JavaScript의 비동기 forEach

비동기 프로그래밍은 Array.prototype.forEach용이 아닙니다. 약속과 마찬가지로 async-await에는 적합하지 않습니다.

const employees = await this.getEmployees();

// BAD
await employees.forEach(async (employee) => {
  await giveBonusToEmployee(employee);
});

await sendEmail('All bonuses sent');

이에 대한 몇 가지 문제점은 다음과 같습니다.

1. 반환된 반복자 함수의 약속은 처리되지 않습니다. 따라서 그들 중 하나가 오류를 만들어도 알아채지 못할 것입니다. 노드 10에 등록된 unhandledrejection 리스너가 없으면 프로세스가 중단됩니다!
2. forEach는 각 약속이 하나씩 이행될 때까지 기다리지 않기 때문에 모든 보너스는 순차적이지 않고 동시에 분배됩니다. 결과적으로 모든 보너스가 제공되기 전에 루프가 종료됩니다.
3. 결과적으로 보너스가 완전히 지급되기 전에 sendEmail()이 이메일을 보냅니다. 아마도 아무도 주어지지 않을 것입니다. 그들은 모두 오류를 던질 수 있습니다!

다음은 이를 위해 구현할 수 있는 솔루션입니다.

1. 각 보너스를 순차적으로 처리합니다. JavaScript가 async-await를 지원하므로 for...of 구성을 사용할 수 있습니다.

for (const employee of employees) {
  await giveBonusToEmployee(employee);
}

다음 보너스로 이동하기 전에 이 루프는 이전 보너스가 제공될 때까지 기다립니다. 필요한 것보다 더 장황하지만 이 상황에서 일반적인 for(...;...;...)를 사용할 수도 있습니다.

2. 모든 보너스를 동시에 처리합니다.

await Promise.all(employees.map(async (employee) => {
  await giveBonusToEmployee(employee);
}));

순서가 중요하지 않은 경우 모든 직원을 동시에 분석하는 것이 더 빠를 수 있습니다. 이것은 모든 보너스를 한 번에 제공하기 시작하지만 모든 보너스가 전송될 때까지 sendEmail()하지 않습니다.

for 및 while 루프는 원래 함수 본문에 작성되기 때문에 자연스럽게 async-await와 함께 작동합니다. 그러나 다른 함수를 호출할 때 async-await는 호출된 함수가 약속을 반환하고 해당 약속을 처리하는 경우에만 사용할 수 있습니다.

.reduce()와 .map() 모두 우리가 기다릴 약속 또는 약속 배열을 생성하기 때문에 사용할 수 있습니다.

그러나 대부분의 배열 메서드는 약속을 반환하지 않거나 한 호출에서 다른 호출로 전달되는 약속을 허용하지 않으므로 비동기식으로 사용할 수 없습니다. 따라서 array.some() 또는 array.filter()와 같은 배열 내에서 비동기 코드를 사용할 수 없습니다.