Promise

 

 

1. Promise란?

Promise는 실행이 됐는데, 결과값을 나중에 쓸 수 있는 것이다.

 

콜백은 무조건 비동기가 아니다. 콜백은 동기일 수도 있고, 비동기 일 수도 있다.

비동기 콜백 종류가 비동기인 것이지 콜백이라고 해서 무조건 비동기가 아니라는 의미이다.

 

 

2. setTimeout의 단점

가장 대표적인 비동기 콜백은 setTimeout이다.

아래 코드의 단점은 어떤 조건이 만족되면 바로 ()=>{} 이 함수가 실행된다는 것이다. 즉, 함수 부분을 분리할 수 없다는 단점이 있다.

setTimeout(()=>{
	console.log('a');
}, 1000);

 

 

3. Promise의 장점

아래 코드는 Promise를 선언하는 기본 구조이다.

new Promise((resolve, reject)=>{
	
});

 

 

Promise에 setTimeout을 넣은 것이다.

다시 한 번 말하지만, Promise는 실행이 됐는데, 결과값을 나중에 쓸 수 있는 것이다.

setTimeout을 혼자 썼을 때처럼 바로 결과값을 보는 게 아니라 내가 쓰기 원할 때 쓸 수 있다.

const promise = new Promise((resolve, reject)=>{
	setTimeout(()=>{
    	resolve();
    },1000);
});

 

 

 

내가 쓰고 싶을 땐 아래처럼 Promise의 then 문법을 사용해서 값을 가져올 수 있다.

promise.then(()=>{
	console.log('a');
}).catch(()=>{
	//catch는 then과 떼어내면 에러가 도출된다.
})

 

결과

a

Promise{<fulfilled>: undefined}

 

 

4. Promise의 예시

Promise는 콜백 헬을 피할 수 있게 도와준다.

콜백 지옥(callback hell)은 콜백 함수를 중첩하여 사용할 때 코드가 복잡해지고 가독성이 저하되는 현상을 말한다.

axios.get('서버주소1', function(데이터1){
	axios.get('서버주소2', function(데이터2){
    	axios.get('서버주소3', function(데이터3){
        	
        });
    });
});

 

이와같은 콜백헬의 문제점은 보기 안좋아서가 아니다!

근본적인 문제점은 결과값을 바로 받아오기 때문이다. 그래서 코드가 지저분해질 수 밖에 없는 것이다.

 

하지만 프로미스를 쓰면 결과값을 나중에 한 번에 받아와도 되는 것이다.

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');

Promise.all([p1, p2, p3, p4, p5, p6]).then((results)=>{}).catch((error)=>{});

 

p1~p6의 실행값을 결과로 받아만 놓고, 안쓰다가 Promise.all을 사용해 쓰고 싶을 때 한 방에 다 받아올 수 있다.

하지만 Promise.all의 단점이 있다. 바로 p1~p6 중 하나라도  실패하면 catch로 가버린다는 것이다.

catch에서는 몇 번째 요소가 실패했는지 보여주지 않는다. 성공한 결과값도 다시 요청을 보내 받아와야 한다.

 

이 문제점을 해결하기 위해 allSettled가 나왔다.

Promise.allSettled([p1, p2, p3, p4, p5, p6]).then((results)=>{
	//실패한 것만 필터링해서 다시 시도
}).catch((error)=>{}).finally(()=>{});

 

results에 모든 결과값을 표시해준다. 실패한 것만 필터링해서 다시 결과값을 받아올 수 있게 된 것이다.

그래서 많은 개발자들이 allSettled만 쓴다.

 

추가 정보로 catch는 Promise.all의 결과값에 대한 에러 catch가 아니다. then까지 포함해 에러를 catch한다.

때문에 결과값을 받아오는 데 실패해도 catch, 받아온 결과값을 then에서 필터링할 때 오류나도 catch로 간다.