JavaScript에서 두 개의 비동기 함수가 모두 완료된 후 함수를 실행하는 방법

두 개의 비동기 함수를 요소로 가지는 배열이 있다고 가정해 보겠습니다. 이때 두 비동기 함수의 실행이 모두 끝난 시점에 특정 작업(예: 콘솔에 메시지 출력)을 수행해야 한다면 어떻게 접근해야 할까요?

비동기 작업 완료 후 코드 실행 방법

비동기 작업이 완료된 이후에 어떤 작업을 수행하는 방법은 크게 두 가지가 있습니다.

• Promise 활용
• async/await 함수 활용

하지만 다루어야 할 비동기 함수가 하나가 아니라 여러 개라면, async/await 방식보다 Promise.all()을 사용하는 것이 훨씬 유리합니다. Promise.all은 여러 프로미스를 병렬로 처리하고, 모든 프로미스가 이행(fulfilled)될 때 한 번에 결과를 받아 후속 작업을 실행할 수 있기 때문입니다.

예제 코드

아래 예제에서는 각각 2초, 3초 후에 완료되는 두 개의 프로미스를 배열에 담고, Promise.all로 두 작업이 모두 끝난 뒤 마지막 함수를 호출합니다.

const arr = [
    new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('func1 fired!');
        }, 2000);
    }),
    new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('func2 fired');
        }, 3000);
    })
];
const lastFunction = () => {
    console.log('this function should be fired at the very last');
};
Promise.all([arr[0], arr[1]]).then((resp) => {
    console.log(resp);
    lastFunction();
}).catch((err) => {
    console.log('something unexpected happened');
})

실행 결과

위 코드를 실행하면 콘솔에 다음과 같은 결과가 출력됩니다. 두 프로미스의 결과값이 배열 형태로 전달되며, 그 직후 마지막 함수가 실행됩니다.

[ 'func1 fired!', 'func2 fired' ]
this function should be fired at the very last

정리

여러 개의 비동기 작업이 모두 완료된 후 특정 로직을 실행해야 한다면 Promise.all()이 가장 깔끔하고 효율적인 선택입니다. 만약 하나의 프로미스라도 실패(reject)하면 catch 블록으로 제어가 넘어가므로, 에러 상황도 함께 고려하여 작성하는 것이 좋습니다. 참고로 실패와 관계없이 모든 작업의 결과를 확인해야 하는 경우에는 Promise.allSettled()를 사용할 수도 있습니다.