Promise 는 비동기처리를 위한 비동기 연산 후 결과값이 실패를 처리 하기 위한 처리기를 연결 할 수 있도록 합니다.

초기의 Javascript는 동기(Sync)형태만 지원하였으나, 이후 계속 발전을 계속 하여 비동기(aSync)형태를 지원하기 시작했습니다. (대표적으로 Ajax 등등.)

 

이후 계속 발전하여 JQuery가 발표 되었고. 더 이상 Promise/Deferred를 사용하지 않고서는 웹을 구현하기 조차 어려워졌습니다.

 

Promise 는 Common JS Promises/A 에서 표준스펙으로 정의 되었습니다.
이런 표준스펙이 여러가지 플렛폼에 정의 됩니다.(JQuery, AngularJS, nodeJS 등등) JQuery에서는 Deferred로 정의 되었습니다.

 

Promise의 역사에 대해서는 차후에 좀 더 자세히 알아 보도록 하고,  Promise가 무었인지에 대해 알아 보도록 하겠습니다.

 

우리가 가장 많이 사용한 ajax를 이용하여 이해도를 높혀 보도록 하겠습니다.

jQuery 1.5 이전
$.ajax({
 	  url : '/getOTP'
	, success : successFunction
	, error : errorFunction 
})

초기에는 Ajax를 위와 같이 구현하였는데. 

1.5 이후부터는 ajax를 promise 가 지원되어 아래와 같이 사용할 수 있게 되었습니다.

jQuery 1.5 이후 
var p = $.ajax({
	url : '/getOPT'
}

p.done(successFunction);
p.fail(errorFunction);

또한 아래와 같이 코딩 할 수 도 있습니다.

jQuery 1.5 이후 
var p = $.ajax({
	url : '/getOPT'
})

p.done(successFunction1);
p.done(successFunction2);
p.done(successFunction3);
p.fail(errorFunction);

또는 
$.ajax({
	url : '/getOPT'
})
.done(successFunction1)
.done(successFunction2)
.done(successFunction3)
.fail(errorFunction);

 이와 같이 chaincode 형태로 연결 할 수 도 있습니다.

이제 조금씩 이해가 가시죠?
그럼 어떻게 함수를 구현하면 done 또는 fail등을 이용할 수 있는지 알아 보도록 하겠습니다.

<Script>
$(document).ready(function() {
	function doSendSMS()
	{
		var dfd = $.Deferred();
		$.ajax({url:'./smssend.json'
				, headers: {
			        'Content-Type': 'application/json'
			    	}

				})
	    	.done(function(result){
	    		//var j = JSON.parse(result);
	    		//console.log(j.authno);
	    		dfd.resolve(result);
	        })
	        .fail(function(x) {
	        	//console.log(x);
	        	dfd.reject(x);
	        });
		return dfd.promise();
	}

	doSendSMS()
		.done(function(x) {
			console.log('SMS 인증 타이머 동작', x);
		})
		.fail(function(x) {
			console.log('SMS 인증 타이머 재시도', x);
		});
	})
</Script>

 

이제 조금씩 이해가 가시죠? resolve 는 done으로 전달되고, reject는 fail로 전달 됩니다.

쉽게 deferred 를 promise()로 리턴하면, 터널이 생긴다고 보시면 됩니다. 이 후 비동기적으로 resolve/reject 가 터널을 통해서 결과가 전달 된다고 보시면 됩니다.

 

Promise 호환성 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise

 

1회는 여기서 마치고 2회를 곧 준비하여 돌아 오겠습니다.

to be continue...

+ Recent posts