Colin's Blog
[javascript] 다중 프로미스 처리 방법과 동시에 여러 비동기 작업 실행하기

프론트엔드 개발에서 비동기 작업은 매우 중요한 요소입니다. 하지만 여러 개의 비동기 작업을 동시에 처리하고 결과를 취합하는 것은 조금 까다로울 수 있습니다. 이를 위해 자바스크립트에서는 프로미스를 사용하여 비동기 작업을 처리할 수 있습니다. 이번 글에서는 자바스크립트에서 다중 프로미스 처리 방법과 동시에 여러 비동기 작업을 실행하는 방법에 대해 알아보겠습니다.

다중 프로미스 처리 방법

Promise.all

Promise.all은 여러 개의 프로미스를 인자로 받고, 모든 프로미스가 완료될 때까지 기다렸다가 그 결과를 반환합니다. 반환값은 각 프로미스의 결과를 담은 배열입니다. 만약 하나의 프로미스가 실패하면, Promise.all은 즉시 reject되며 실패한 프로미스의 에러를 반환합니다.

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

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

Promise.all([promise1, promise2])
  .then(results => {
    console.log(results); // ['Promise 1', 'Promise 2']
  })
  .catch(error => {
    console.error(error); // 프로미스 중 하나가 실패한 경우 에러를 출력
  });

Promise.race

Promise.race는 여러 개의 프로미스를 인자로 받고, 가장 먼저 실행이 완료된 프로미스의 결과나 에러를 반환합니다. 다른 프로미스들은 무시됩니다.

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

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

Promise.race([promise1, promise2])
  .then(result => {
    console.log(result); // 'Promise 1' (첫 번째 프로미스 resolve됨)
  })
  .catch(error => {
    console.error(error);
  });

동시에 여러 비동기 작업 실행하기

async/await

ES2017부터 도입된 async/await는 비동기 코드를 동기적으로 작성할 수 있게 해주는 문법입니다. 다중 프로미스 처리에 매우 유용합니다.

async function executeAsyncTasks() {
  try {
    const result1 = await promise1;
    const result2 = await promise2;

    console.log(result1, result2);
  } catch (error) {
    console.error(error);
  }
}

executeAsyncTasks();

위의 예제에서 executeAsyncTasks() 함수는 promise1을 실행한 후에 결과를 받고, 그 다음에 promise2를 실행한 후에 결과를 받습니다. 이렇게 하면 각 작업이 완료될 때까지 기다리며 결과를 순차적으로 처리할 수 있습니다.

Promise.all과 async/await

Promise.all과 async/await를 결합하여 여러 개의 비동기 작업을 동시에 실행하고 결과를 한 번에 처리할 수도 있습니다.

async function executeAsyncTasks() {
  try {
    const results = await Promise.all([promise1, promise2]);

    console.log(results);
  } catch (error) {
    console.error(error);
  }
}

executeAsyncTasks();

위의 예제에서 Promise.all([promise1, promise2])은 promise1과 promise2를 동시에 실행하고, 모든 작업이 완료될 때까지 기다린 다음 결과를 반환합니다.

결론

다중 프로미스 처리 방법과 동시에 여러 비동기 작업을 실행하는 방법에 대해 알아보았습니다. Promise.all과 Promise.race를 사용하여 여러 개의 프로미스를 처리할 수 있으며, async/await를 이용하여 비동기 작업을 더욱 편리하게 처리할 수 있습니다. 이러한 기술들을 응용하여 프론트엔드 개발에서 효율적인 비동기 작업 처리를 할 수 있습니다.

참고 문서:

© 2018 Colin. All rights reserved.