Promise.all()
Promise.all() 메서드는 순회 가능한 객체에 주어진 모든 프로미스가 이행한 후, 혹은 프로미스가 주어지지 않았을 때 이행하는 Promise를 반환한다.
const p1 = Promise.resolve('하나')
const p2 = Promise.resolve('둘')
const p3 = Promise.resolve('셋')
const result = Promise.all([p1, p2, p3])
console.log(result) // Promise {<pending>}
setTimeout(() => {
console.log(result) // Promise {<fulfilled>: Array(3)}
})
일반적으로 다음 코드를 계속 실행하기 전에 서로 연관된 비동기 작업 여러 개가 모두 이행되어야 하는 경우에 사용된다.
입력 값으로 들어온 프로미스 중 하나라도 거부 당하면 Promise.all()은 즉시 거부한다.
const p1 = new Promise((resolve, reject) => {
setTimeout(() => resolve('하나'), 1000)
})
const p2 = new Promise((resolve, reject) => {
setTimeout(() => resolve('둘'), 2000)
})
const p3 = new Promise((resolve, reject) => {
reject('거부')
})
const result = Promise.all([p1, p2, p3])
// Uncaught (in promise) 거부
setTimeout(() => {
console.log(result) // Promise {<rejected>: '거부'}
})
p1, p2가 먼저 완료되었음에도, p3가 거부 당했기 때문에 Promise.all()은 즉시 거부한다.
Promise.allSettled()
Promise.allSettled() 메서드는 주어진 모든 프로미스를 이행하거나 거부한 후, 각 프로미스에 대한 결과를 나타내는 객체 배열을 반환한다.
const p1 = Promise.resolve('하나')
const p2 = Promise.resolve('둘')
const p3 = Promise.reject('거부')
const result = Promise.allSettled([p1, p2, p3])
console.log(result) // Promise {<pending>}
setTimeout(() => {
console.log(result) // Promise {<fulfilled>: Array(3)}
})
반환된 각 객체별로 status를 확인할 수 있다.
fufilled 상태라면 value, rejected 상태라면 reason속성을 확인할 수 있다.
value나 reason을 통해 각 Promise가 어떻게 처리되었는지 알 수 있다.
const p1 = Promise.reject('거부')
const p2 = Promise.reject('거북이')
const p3 = Promise.reject('거부')
const result = Promise.allSettled([p1, p2, p3])
setTimeout(() => {
console.log(result) // Promise {<fulfilled>: Array(3)}
})
모든 프로미스가 거부되었어도 [[PromiseState]]는 fulfilled 상태이다.
공통점 / 차이점
Promise.all() | Promise.allSettled() | |
공통점 | 단순히 비동기 작업을 병렬로 실행하기 위해서 자주 사용된다. | |
차이점 | rejected가 하나라도 있으면 모든 요청을 중단한 뒤 rejected 반환 | 모든 프로미스를 이행하고, 각 프로미스에 대한 결과를 담은 객체 배열을 반환 |
'Javascript' 카테고리의 다른 글
keydown, keyup 이벤트의 key 프로퍼티 (한글 입력 시 차이) (1) | 2024.10.02 |
---|---|
객체 배열을 키-값 형태의 JSON으로 변환하는 방법 | JSON.stringify (0) | 2024.09.20 |
[ Javascript ] 객체 관련 ES6 문법 (1) | 2024.09.11 |
[ Javascript ] 정렬 함수 (sort, toSorted, localeCompare) (0) | 2024.07.16 |
input 자동완성 해제 (autocomplete) (0) | 2024.07.12 |