Promise all 이란?

프로미스 올!(Promise all)이란 비동기처리를 병렬로 처리해주는 메서드 이다.
자바스크립트에서는 비동기 처리를 하기 위한 몇가지 방법이 존재한다.

가장 기본적인 방법 3가지

• 콜백 함수
• 프로미스(Promise)
• async-await

이러한 비동기 처리를 병렬로 처리하고 싶다면 Promise all을 사용하면 된다.

어떻게 사용하면 될까?, 예제를 보자

  const onClickPromise = async () => {
    console.time("프로미스 시간");
  	await new Promise(resolve => setTimeout(() => resolve(1), 3000)), // 1
  	await new Promise(resolve => setTimeout(() => resolve(2), 2000)), // 2
  	await new Promise(resolve => setTimeout(() => resolve(3), 1000)) // 3
    console.timeEnd("프로미스 시간");
  };

console.time, console.timeEnd를 통해 걸리는 시간을 확인해 볼수 있다.

onClickPromise함수를 실행하면 총 6초의 시간이 걸린다.
이걸 병렬로 실행시켜주는게 promise.all 이다.

const onClickPromiseAll = async () => {
  console.time("프로미스 시간");
	await Promise.all([
      new Promise(resolve => setTimeout(() => resolve(1), 3000)), // 1
  	  new Promise(resolve => setTimeout(() => resolve(2), 2000)), // 2
      new Promise(resolve => setTimeout(() => resolve(3), 1000))  // 3
	  ])
  console.timeEnd("프로미스 시간");
}

onClickPromiseAll 함수를 실행하게 되면 병렬로 비동기 처리를 실행하기 때문에 가장 긴 시간이 3초만 걸리게 되는 것이다.