Promise.all()

hyeun427·2022년 4월 26일
0

TIL

목록 보기
44/59
post-thumbnail

Promise.all()

Promise.all() 메서드는 ()안에 들어간 함수들을 전부 실행하고 reject조건에 만족하면 종료되는 메서드이다.

여러 개의 이미지를 올릴 때 유용하게 사용한다.

Promise.all() 코드 실습

export default function PromiseAllPage() {
 // 동시에 요청, 한번만 기다림!
 // Promise.all에 await를 붙여줘서 아래의 세개 이미지가 모두 불러와질때까지 기다림!

 // 3초
 const onClickPromiseAll = async () => {

   console.time("Promise.all 시작");
   const result = await Promise.all(
     ["https://dog1.jpg", "https://dog2.jpg", "https://dog3.jpg"].map(
       (el) =>
         new Promise((resolve, reject) => {
           setTimeout(() => {
             resolve(el);
           }, 3000);
         })
     )
   );
   console.log(result);
   console.timeEnd("Promise.all 시작");
 };

 return (
   <div>
     <button onClick={onClickPromiseAll}>Promise.all 연습하기</button>
   </div>
 );
}

위의 코드를 실행해보면 콘솔에 처리가 시작되서 끝나는데까지 걸리는 시간이 콘솔에 찍힌다.

profile
어제보다 더 나은, 어제보다 더 밝은

0개의 댓글