자바스크립트 비동기(Promise.all)

한장희·2025년 9월 11일

JavaScript

목록 보기
2/2

Promise.all

Promise.all()은 여러 Promise를 동시에 기다릴 때 사용한다. 여러 비동기 작업을 한꺼번에 처리할 때 유용하다. Promise.all() 자체도 Promise를 리턴을 한다. 아큐먼트로 전달된 Promise들이 모두 fullfilled 상태가 되었을 때만, Promise.all()이 fullfilled 상태가 된다. 이떄 각 아규먼트로 전달된 Promise의 성공 결과값들로 이루어진 배열을 결과값으로 갖게 된다. 만약 아규먼트로 전달된 Promise 중 하나라도 rejected 상태가 되면 Promise.all()이 리턴하는 Promise도 rejected 상태가 되고, rejected된 Promise의 결과값(오류)를 결과값으로 갖게 된다.

코드로 보는 예시

아래와 같은 코드는 함수 getSomething 앞에 있는 await 때문에 getSomething이 완료될때까지 기다렸다가 다음줄에 있는 코드가 실행이 된다. 즉 작업을 순차적으로 처리하게 된다. 이때 Promise.all을 사용하면 병렬처리를 할 수가 있다.

  async function getSomething(id) {
      const response = await fetch('.../${id}');
      const data = await response.json();
      return data;
  }

  for (let i = 1; i < 11; i++) {
      const something = await getSomething(i);
  }

아래 코드처럼 Promise.all을 이용해서 여러 비동기 작업을 한꺼번에 처리할 수 있다.

  async function getSomething(id) {
      const response = await fetch('.../${id}');
      const data = await response.json();
      return data;
  }
  
  //promise객체들이 담김
  const promises = [];

  //await이 없으니까 바로 실행됨
  for (let i = 1; i < 11; i++) {
      promises.push(getSomething(i));
  }
  
  //변수를 try문 바깥에서도 사용하기 위해서 try문 바깥에 선언. 할당은 try문 안에서.
  let somethings;
  
  try{
    somethings = await Promise.all(promises);
  } catch(error) {
    console.log(employees);
  }

await는 함수 실행을 일시정지 시킨다.

profile
발전하는 프론트엔드 개발자입니다!

0개의 댓글