Promise.all의 순서 보장 문제, 어떻게 해결할까?

자바스크립트에서 비동기 작업을 처리할 때, Promise.all을 사용하여 여러 작업을 병렬적으로 실행하는 경우가 많습니다.

 

그러나, Promise.all은 작업이 완료되는 순서를 보장하지 않습니다. 이 문제를 해결하는 방법을 알아보겠습니다.

---

Promise.all의 순서 보장 문제

Promise.all은 여러 비동기 작업을 병렬적으로 실행하고, 모든 작업이 완료되면 결과를 반환합니다. 

그러나, 작업이 완료되는 순서는 보장되지 않습니다. 

예를 들어, 다음과 같은 코드가 있다고 가정해 보겠습니다.

 

const list = [1, 2, 3, 4];
const promises = list.map(async (item) => {
  await new Promise(resolve => setTimeout(resolve, item * 1000));
  return item;
});

await Promise.all(promises);

 

이 경우, Promise.all은 모든 비동기 작업이 완료되면 결과를 반환하지만, 작업이 완료되는 순서는 [1, 2, 3, 4]가 아니라 [1, 2, 3, 4]의 순서로 완료되는 시간에 따라 달라집니다.

 

---

해결 방법 1: for 루프 사용

순서를 보장하는 방법 중 하나는 for 루프를 사용하여 순차적으로 비동기 작업을 실행하는 것입니다.

const list = [1, 2, 3, 4];
for (const item of list) {
  await new Promise(resolve => setTimeout(resolve, item * 1000));
  console.log(item);
}

 

이 경우, 작업이 완료되는 순서는 [1, 2, 3, 4]로 보장됩니다.

해결 방법 2: for...of 루프와 entries() 메서드 사용

또 다른 방법은 for...of 루프와 entries() 메서드를 사용하는 것입니다.

const list = [1, 2, 3, 4];
for (const [index, item] of list.entries()) {
  await new Promise(resolve => setTimeout(resolve, item * 1000));
  console.log(item);
}

 

entries() 메서드는 배열의 키-값 쌍을 반환하는 이터레이터를 반환합니다. 

 

for...of 루프는 이 이터레이터를 사용하여 배열의 요소를 순차적으로 처리합니다.

따라서, 작업이 완료되는 순서는 [1, 2, 3, 4]로 보장됩니다.

 

---

추가 팁

Promise.all은 작업이 완료되는 순서를 보장하지 않지만, 작업이 실패하는 경우에는 즉시 실패를 반환합니다.

for 루프나 for...of 루프와 entries() 메서드를 사용하면 순서를 보장할 수 있지만, 작업이 실패하는 경우에는 즉시 실패를 반환하지 않습니다.

이 방법들을 사용하여 비동기 작업을 처리할 때 순서를 보장할 수 있습니다.