[javascript] 프로미스를 이용한 병렬 처리 방법

07 Dec 2023

javascript

자바스크립트에서 비동기 작업을 처리하는 데에는 여러가지 방법이 있습니다. 그 중에서도 프로미스(Promise)는 많이 사용되는 방법 중 하나입니다. 프로미스를 이용해 비동기 작업을 병렬로 처리하는 방법에 대해 알아보겠습니다.

1. Promise.all 메서드

Promise.all 메서드는 여러 개의 프로미스를 인자로 받아 모든 프로미스가 완료될 때까지 기다린 다음, 그 결과를 배열로 반환합니다. 이를 이용해 병렬로 여러 개의 비동기 작업을 처리할 수 있습니다.

const promise1 = fetch('https://api.example.com/data1');
const promise2 = fetch('https://api.example.com/data2');
const promise3 = fetch('https://api.example.com/data3');

Promise.all([promise1, promise2, promise3])
  .then((responses) => {
    // 모든 프로미스가 완료된 후 실행되는 코드
    const data1 = responses[0].json();
    const data2 = responses[1].json();
    const data3 = responses[2].json();
    
    // 데이터 처리
    // ...
  })
  .catch((error) => {
    // 오류 처리
    console.error(error);
  });

위의 예제에서는 fetch 함수를 통해 세 개의 데이터를 각각 비동기로 요청하고, Promise.all 메서드를 사용하여 모든 요청이 완료될 때까지 기다린 다음에 데이터를 처리하는 코드를 작성하였습니다.

2. Promise.race 메서드

Promise.race 메서드는 여러 개의 프로미스를 인자로 받아 가장 먼저 완료되는 프로미스의 결과 또는 오류를 반환합니다. 이를 이용해 여러 개의 비동기 작업 중에서 가장 빨리 완료되는 작업의 결과를 사용할 수 있습니다.

const promise1 = new Promise((resolve) => {
  setTimeout(() => resolve('Data 1'), 2000);
});

const promise2 = new Promise((resolve) => {
  setTimeout(() => resolve('Data 2'), 1000);
});

Promise.race([promise1, promise2])
  .then((result) => {
    // 가장 빨리 완료된 프로미스의 결과를 사용하는 코드
    console.log(result);
  })
  .catch((error) => {
    // 오류 처리
    console.error(error);
  });

위의 예제에서는 두 개의 프로미스를 생성하고, Promise.race 메서드를 사용하여 빨리 완료되는 프로미스의 결과를 사용하는 코드를 작성하였습니다.

결론

프로미스를 이용한 병렬 처리는 여러 개의 비동기 작업을 효율적으로 처리할 수 있는 방법입니다. Promise.all 메서드를 이용하면 모든 비동기 작업이 완료된 후에 결과를 처리할 수 있고, Promise.race 메서드를 이용하면 가장 빨리 완료되는 작업의 결과를 사용할 수 있습니다.

더 자세한 내용은 아래의 링크를 참고하시기 바랍니다:

MDN Web Docs: Promise