프로그래밍/Js

Promise.all 모든 비동기 작업이 끝난후 작업 실행

소행성왕자 2024. 10. 25. 09:30

Promise.all은 JavaScript에서 여러 개의 비동기 작업을 병렬로 처리하기 위한 메서드입니다.

주요 특징

  • 병렬 실행: 여러 프로미스를 동시에 실행합니다
  • 배열 입력: 프로미스 배열을 인자로 받습니다
  • 단일 프로미스 반환: 모든 프로미스의 결과를 담은 배열을 반환하는 새로운 프로미스를 생성합니다
  • 전체 완료 대기: 모든 프로미스가 이행(fulfilled)될 때까지 기다립니다
  • 순서 보장: 결과 배열은 입력된 프로미스 순서를 유지합니다
  • 빠른 실패: 하나라도 거부(rejected)되면 전체가 즉시 거부됩니다
  • 성능 향상: 독립적인 비동기 작업들을 동시에 처리하여 전체 실행 시간을 단축합니다

Promise.all 여러 API 호출 결과를 번에 처리하거나, 독립적인 데이터 fetching 병렬화하는 등의 상황에서 유용하게 사용됩니다.

예제코드

const delay=ms=>{
        return new Promise((resolve,reject)=>{
            setTimeout(resolve, ms);
        });
    };
    console.log('start');

    const t1 = async _=>{
        await delay(2000);
        return '1 완료';
    };
    const t2 = async _=>{
        await delay(4000);
        return '2 완료';
    };
    const t3 = async _=>{
        await delay(6000);
        return '3 완료';
    };
    
    (async _=>{
        const startTime = Date.now();
        const results = await Promise.all([t1(), t2(), t3()]);
        const endTime = Date.now();
        const totalTime = endTime - startTime;

        
        console.log(results);
        console.log('총 소요시간:', totalTime);
        console.log('end');
    })();

위 코드는 다음과 같이 작동합니다:

  • delay 함수는 주어진 시간(밀리초) 후에 resolve되는 Promise를 반환합니다.
  • 세 개의 비동기 작업(t1t2t3)을 정의합니다. 각 작업은 서로 다른 지연 시간을 가집니다.
  • Promise.all()을 사용하여 세 작업을 동시에 실행합니다. 이 메서드는 모든 Promise가 완료될 때까지 기다립니다.
  • 결과를 배열로 받아 콘솔에 출력합니다.
  • 전체 작업의 소요 시간을 계산하여 출력합니다.

코드를 실행하면 다음과 같은 결과가 나타납니다

위 예제에서 Promise.all()은 세 작업 중 가장 오래 걸리는 작업이(6초) 완료될 때까지 기다립니다. 모든 작업이 병렬로 실행되므로 총 소요 시간은 가장 긴 작업의 시간과 비슷합니다.

Promise.all() 모든 작업중 하나라도 실패 하면 전체가 실패로 처리 됩니다.

  • 여러 독립적인 작업 결과를 모두 알아야 할때 
  • 일부 작업 실패가 전체 프로세스를 중단시키지 않아야 할때 

위와 같은 상황에서는 Promise.allSettled() 사용하면 됩니다.

방식은 여러 비동기 작업을 효율적으로 처리하고 모든 결과를 번에 얻고자 유용합니다