[Javascript] 프로미스 (Promise)

※ Promise

사용자가 상점에 물건을 구매하러갔다.

찾는 물건이 없다.

물건이 들어올때 까지 계속 상점에 물건이 있는지 물어봐야할까 ? => NO

 

상점에 물건이 들어오면 연락달라고 전화번호를 남기고 간다 = > YES => Promise

 

 

▶ 프로미스 생성

 

▷ 기본형태

const pr = new Promise((resolve, reject)=>{

});

resolve : 성공한 경우 실행

reject : 실패했을 때 실행

= > 이렇게 어떤일이 완료된 후 실행되는 함수를 콜백함수 라고한다. 

 

 

new Promise 생성자가 반환하는 객체는 state 와 result를 프로퍼티로 갖는다

 

어떤 일이 성공해서 resolve 가 호출되면

state : fulfilled

result : value

가 되고

 

실패해서 reject 가 호출되면

state : rejected

result : error 

가 된다

 

이때 result는 인자로 전달된 값이다.

 

 

const pr = new Promise((resolve,reject)=>{
	setTimeout(()=>{
    	resolve('OK')
    },3000)
});

3초 후에 resolve 호출되면서

state : fulfilled

result : OK

로 변경됨

 

 

then() 을 이용해서 resolve 와 reject 를 설명할 수 있다

pr.then(
	function(result){}, // 이행되었을 때 실행, result에는 ok 가 들어옴
    function(err){}
);

pr.then(
	function(result){}
).catch(
	function(err){}
)

둘은 똑같지만 catch를 사용하는 것이 더 가독성 좋고, 에러를 잘 잡아줄 수 있다

 

finally 를 추가하면 성공하던 실패하던 항상실행된다

pr.then(
	function(result){}
).catch(
	function(err){}
).finally(
	function(){
    	console.log('--주문 끝--')
    }
)

 

ex )

 

 

예제 ) ajax 통신 예제 코드에 프로미스 적용

https://joshua1988.github.io/web-development/javascript/promise-for-beginners/

function getData(){
	return new Promise(function(resolve,reject){
    	$.get('url', function(response){
        	if(response){
            	resolve(response);
            }
            reject(new Error("Failed"));
        });
    });
}

//위 $.get() 호출 결과에 따라 'response' 또는 'Error' 출력
getData().then(function(data){
	console.log(data);	//response 값 출력
}).catch(function(arr){ 
	console.error(err);  // Error 출력
});