Promise.all이란?
Promise.all() 메서드는 인자로 받은 Promise 인스턴스들의 처리 결과를 담은 새로운 Promise를 반환합니다. 인자로 전달된 Promise 인스턴스들이 모두 fulfilled 상태가 되면 결과 Promise는 모든 fulfilled 값을 가진 배열을 인수로 가진 fulfilled 상태가 되고, 하나 이상의 Promise가 rejected 상태가 되면 가장 먼저 rejected 상태가 된 Promise의 이유로 결과 Promise는 rejected 상태가 됩니다.
병렬 처리
Promise.all() 을 이용하면 병렬적으로 여러 개의 Promise를 실행할 수 있습니다. 모든 Promise가 fulfilled 상태가 되기 전까지는 결과 Promise가 fulfilled 되지 않기 때문에 Promise.all() 을 이용하면 병렬로 동작하는 비동기 로직을 구현할 수 있습니다.
예제
예를 들어, 3개의 Promise가 있다고 가정해봅시다.
const promise1 = new Promise((resolve, reject) => { setTimeout(resolve, 500, 'one'); });
const promise2 = new Promise((resolve, reject) => { setTimeout(resolve, 100, 'two'); });
const promise3 = new Promise((resolve, reject) => { setTimeout(resolve, 1000, 'three'); });
Promise.all([promise1, promise2, promise3]) .then(values => { console.log(values); });
// ['two', 'one', 'three'] Promise.all() 을 사용하면
promise2, promise1, promise3 순으로 fulfilled 되며,
모두 fulfilled 되었을 때 values 배열에 결과 값이 담겨 then 블록 내부가 실행됩니다.
마무리
Promise.all() 을 이용하면 병렬적으로 여러 개의 비동기 처리를 수행하고 모든 처리가 완료된 후에 결과 값을 이용할 수 있습니다. Promise.all() 을 활용하면 복잡한 비동기 처리 로직을 깔끔하고 직관적으로 작성할 수 있습니다.
'FE > 개념정리' 카테고리의 다른 글
TS - 유틸리티 타입 Omit (0) | 2023.02.12 |
---|---|
JS - Throttle 와 Debounce (0) | 2023.02.02 |
JS - 원시 타입 vs 참조 타입 (0) | 2023.01.17 |
React - 불변성은 왜 중요하고, 지켜져야 하는가 (0) | 2022.05.03 |