Colin's Blog
자바스크립트 async/await와 Promise.all의 함께 사용하기

자바스크립트는 비동기 처리를 위한 다양한 방법을 제공합니다. 그 중에서도 async/await와 Promise.all은 많은 개발자들에게 널리 사용되고 있습니다. async/await는 비동기 코드를 동기적으로 작성할 수 있게 해주는 문법이며, Promise.all은 여러 개의 비동기 작업을 병렬로 처리할 수 있도록 도와줍니다. 이번 글에서는 async/await와 Promise.all을 함께 사용하는 방법에 대해 알아보겠습니다.

async/await란?

async/await는 자바스크립트 비동기 처리를 위한 기능 중 하나로, 비동기적으로 동작하는 함수를 동기적으로 작성할 수 있도록 해주는 문법입니다. async로 선언된 함수 내에서 await 키워드를 사용하여 Promise 객체의 처리가 완료될 때까지 코드의 실행을 일시적으로 중단시킬 수 있습니다.

예를 들어, 다음과 같이 Promise를 반환하는 비동기 함수가 있다고 가정해봅시다.

function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

이 함수는 주어진 시간(ms)만큼의 딜레이 후에 Promise를 resolve하는 함수입니다.

이제 async/await를 사용하여 사용자 경험을 향상시키기 위해 딜레이 후에 다음 작업을 수행하는 예제를 살펴보겠습니다.

async function delayedTask() {
  console.log('Start'); // 비동기 작업 시작
  
  await delay(2000); // 2초 동안 딜레이
  
  console.log('End'); // 비동기 작업 종료
  
  return 'Task completed!';
}

delayedTask().then(result => console.log(result));

위의 코드에서는 delayedTask 함수가 promise를 반환하고, await 키워드를 사용하여 delay 함수가 완료될 때까지 기다린 다음에 다음 줄로 넘어갑니다. 결과적으로 ‘Start’를 출력한 후, 2초 동안 일시정지한 후 ‘End’를 출력하고, 마지막으로 ‘Task completed!’를 출력합니다.

Promise.all이란?

Promise.all은 여러 개의 Promise를 동시에 처리하고, 모든 Promise의 결과를 한 번에 받을 수 있도록 도와주는 메서드입니다. Promise.all은 배열 형태로 Promise 객체를 인자로 받으며, 모든 Promise가 처리될 때까지 기다린 후에 결과를 반환합니다.

예를 들어, 다음과 같이 두 개의 비동기 함수가 있다고 가정해봅시다.

async function getUser(id) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({ id, username: 'john' });
    }, 1000);
  });
}

async function getEmail(username) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({ username, email: 'john@example.com' });
    }, 1500);
  });
}

이제 Promise.all을 사용하여 두 개의 비동기 작업을 동시에 처리하고, 결과를 받아와서 활용할 수 있습니다.

async function getUserData() {
  const userPromise = getUser(1);
  const emailPromise = getEmail('john');

  const [user, email] = await Promise.all([userPromise, emailPromise]);

  console.log(user, email);
}

getUserData();

위의 코드에서는 getUserData 함수 내에서 getUser와 getEmail 함수를 호출하고, 이 두 개의 Promise 객체를 배열 형태로 Promise.all에 전달합니다. Promise.all은 두 개의 비동기 작업이 모두 완료될 때까지 기다린 후에, 결과를 배열로 반환합니다. 이후에는 배열 디스트럭처링을 사용하여 user와 email 변수에 결과를 할당하고, 이를 활용해서 원하는 작업을 수행할 수 있습니다.

async/await와 Promise.all 함께 사용하기

async/await와 Promise.all은 개별적으로 사용할 때 각각 비동기 작업을 처리하는데 매우 유용합니다. 그러나 두 기능을 함께 사용하면 더욱 높은 수준의 비동기 처리를 구현할 수 있습니다.

다음은 async/await와 Promise.all을 함께 사용하여 여러 개의 비동기 작업을 병렬로 처리하는 예제 코드입니다.

async function processTasks() {
  const task1Promise = doTask1();
  const task2Promise = doTask2();
  const task3Promise = doTask3();

  const results = await Promise.all([task1Promise, task2Promise, task3Promise]);

  console.log(results);
}

processTasks();

위의 예제에서는 doTask1, doTask2, doTask3 등의 비동기 함수를 호출하고, Promise.all을 사용하여 이들 함수의 Promise 객체를 배열로 묶어 처리합니다. 그리고 모든 비동기 작업이 완료된 후에는 결과를 배열 형태로 받아옵니다. 이후에는 results를 활용하여 원하는 작업을 수행할 수 있습니다.

async/await와 Promise.all은 서로를 보완하는 기능으로, 복잡한 비동기 코드에서 효과적으로 사용할 수 있습니다. 함께 사용하면 코드를 더 직관적이고 간결하게 작성할 수 있으며, 동시에 여러 개의 비동기 작업을 효율적으로 처리할 수 있습니다.

이상으로 자바스크립트 async/await와 Promise.all의 함께 사용하는 방법에 대해 알아보았습니다. 이러한 비동기 처리 기능들을 활용하여 더욱 뛰어난 웹 어플리케이션을 개발할 수 있기를 바랍니다.

© 2018 Colin. All rights reserved.