[인간 JS엔진 되기] 2-2. 프로미스의 최고의 장점

Promise

Promise는 실행한 결과값을 나중에 쓸 수 있는 장점이 있음

 

아래 예시 코드는 setTimeout 비동기 함수를 사용했을 떄의 상황

setTimeout 내부의 결과는 10초가 지나면 무조건 실행됨

그래서 사용자가 원하는 시간이 바뀌어지면 시간을 계속 바꿔줘야함

//1초 뒤에 자동 실행
//결과를 바로 받고싶지 않아도 받을 수 밖에 없음
setTimeout(()=> {
    let data = '10초';
    console.log(data)
}, 10000)

 

하지만 Promise는 사용자가 원하는 시간에 결과값을 사용할 수 있음!

//하지만 promise를 쓰면 변수에 담아서 then을 이용해 우리가 결과를 사용하고싶을 때, 사용할 수 있음
const promise = new Promise((resolve, reject) => {
    setTimeout(()=> {
        let data = 'promise 1초'
        resolve(data);
    }, 0)
})


promise.then((resolve) => {
    console.log(resolve)
})

 

콜백도 결과값을 바로 받아야하는 단점을 가지고 있음

 

아래 처럼 외부 api 응답을 받아서 나중에 내가 원할 때 사용 할 수 있음

all 대신 allSettled 사용하자!

const p1 = axios.get('서버주소1')
const p2 = axios.get('서버주소2')
const p3 = axios.get('서버주소3')
const p4 = axios.get('서버주소4')
const p5 = axios.get('서버주소5')
const p6 = axios.get('서버주소6')
const p7 = axios.get('서버주소7')


//all의 단점은 하나라도 실패하면 catch 에러로 떨어짐
promise.all([p1,p2,p3,p4,p5,p6,p7])
	.then((result) => {})
	.catch((error) => {});

//allSettled를 이용하면 실패한 것만 필터링해서 다시 시도 가능
promise.allSettled([p1,p2,p3,p4,p5,p6,p7])
	.then((result) => {})
	.catch((error) => {});