프로미스 올!(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초만 걸리게 되는 것이다.