Promise

콜백함수 디자인이 맘에 안들면 Promise를 배워보자.

var 프로미스 = new Promise();

프로미스.then(function(){//프로미스가 성공일 경우 실행할 코드
	
}).then(function(){//이런 식으로 1번째 할거 2번째 할거 then으로 붙여서 옆으로 길어지지 않음

}).catch(function(){//이건 실패할 경우에도 코드실행 가능

}).finally(function(){//이건 성공이든 실패든 뭔가 일어났을때 실행하는 기능

})

위처럼 promise 는 성공/실패를 판정하는 기계라고 보면 된다. 

그리고, then, catch, finally 같은 키워드를 사용할 수 있다.

 

근데, then함수는 new Promise로 생성된 오브젝트 뒤에만 붙일 수 있기에, then을 여러개 사용하려면 첫번째 then에서 프로미스2를 new Promise로 만들고, return 프로미스2를 해주면 그 자리에 new Promise로 생성된 오브젝트가 남기에 한번 더 사용할 수 있다.

var 프로미스 = new Promise;

프로미스.then(function(){
	var 프로미스2 = new Promise;
   	return 프로미스2;
})

 

이제 성공/실패 기계를 디자인해보자.

var 프로미스 = new Promise(function(resolve, reject){//파라미터로 성공, 실패 2개가 들어감
	성공(); //성공과 실패 판정을 내리는 법
    	//실패();
});

프로미스.then(function(){
	
}).catch(function(){

})

위처럼 프로미스에서 성공()코드로 판정을 내리면 then에 있는 코드가 실행이 되며, 

실패()로 판정을 내리면 catch에 있는 코드가 실행이 된다.

 

예를 들어보면,

var 프로미스 = new Promise(function(resolve, reject){//파라미터로 성공, 실패 2개가 들어감
	var 어려운연산 = 1 + 1;
    	성공(어려운연산);
});

프로미스.then(function(결과){
	console.log(결과)
}).catch(function(){

})

이렇게 어려운 연산이 끝나면 특정 코드를 실행하고 싶을때, 위처럼 어려운 연산이란 변수를 만들고 끝나면 성공판정을 내린다. 그러면 then에 있는 코드가 실행된다.

 

그리곤, 성공/실패 판정에서 파라미터를 넣어 데이터를 전달할 수 있다. 성공()에 파라미터를 넣으면 then의 콜백함수에 파라미터자리에 들어가게 된다.

 

promise는 3가지 상태가 있다. 

pending 판정대기중

resolved 성공시

rejected 실패시

이렇게 promise의 오브젝트의 상태가 변한다.

 

마지막으로 promise는 비동기적 처리가 가능하게 해주는 문법이 아니다. 그저, 콜백함수 디자인의 대체품인 코딩스타일 일뿐이다.

 

그리고 promise와 비슷한  fetch가 있는데, fetch는 항상 promise를 리턴한다.

즉, fetch().then().catch() 이런 식으로 사용가능하다.