이전 포스팅에서는 너무 무지한 상태에서 쓰다보니 다시 봐도 이해가 안되는 듯 하여 쉬운 예제를 통해 정리해보겠습니다.
기존에 promise 패턴이 아닌 callback 방식의 경우에는 아래와 같이 코딩을 하였습니다.
### js
$.ajax({
url: "/ServerResource.txt",
success: successFunction,
error: errorFunction
});
대부분 함수의 파라미터 객체에 function 을 설정하여 결과에 대한 처리를 했습니다. 이러한 경우 callback 이 중첩되어 소스의 가독성도 떨어질 뿐더러 관리가 안되는 단점이 있었습니다.
jQuery 1.5 버전 이후부터는 아래와 같이 ```done()```, ```fail()```, ```always()``` 를 이용하여 결과에 대한 처리를 지정합니다.
### js
var promise = $.ajax({
url: "/ServerResource.txt"
});
promise.done(successFunction);
promise.fail(errorFunction);
promise.always(alwaysFunction);
```jQuery.ajax()``` 는 ```jQuery XMLhttpRequest(jqXHR)``` 을 반환하기 때문에 아래와 같은 방식으로도 구현이 가능합니다.
### js
$.ajax( "example.php" )
.done(function() { alert("success"); })
.fail(function() { alert("error"); })
.always(function() { alert("complete"); });
체인 방식이 아니더라도 jqXHR 객체에 직접 지정도 가능합니다.
### js
var jqxhr = $.ajax( "example.php" )
.done(function() { alert("success"); })
.fail(function() { alert("error"); })
.always(function() { alert("complete"); });
// perform some work here ...
// Set another completion function for the request above
jqxhr.always(function() { alert("another complete"); });
jQuery 1.8 버전 이후부터는 ```then()``` 함수를 사용하여 Promise 패턴을 적용할 수 있습니다.
```then()``` 의 첫번째 인자는 성공에 대한 액션, 두번째 인자에는 실패에 대한 액션을 지정할 수 있습니다.
### js
$.ajax({url: "/ServerResource.txt"}).then([successFunction1, successFunction2, successFunction3],
[errorFunction1, errorFunction2]);
//same as
var jqxhr = $.ajax({
url: "/ServerResource.txt"
});
jqxhr.done(successFunction1);
jqxhr.done(successFunction2);
jqxhr.done(successFunction3);
jqxhr.fail(errorFunction1);
jqxhr.fail(errorFunction2);
### js
var promise = $.ajax({
url: "/ServerResource.txt"
});
promise.then(successFunction, errorFunction);
### js
var promise = $.ajax({
url: "/ServerResource.txt"
});
promise.then(successFunction); //no handler for the fail() event
Deferred 객체를 직접 만들어서 사용할 수 있는데, 그 방법은 아래와 같습니다.
### js
var timer;
$('#result').html('waiting…');
var promise = process();
promise.done(function() {
$('#result').html('done.');
});
promise.progress(function() {
$('#result').html($('#result').html() + '.');
});
function process() {
var deferred = $.Deferred();
timer = setInterval(function() {
deferred.notify();
}, 1000);
setTimeout(function() {
clearInterval(timer);
deferred.resolve();
}, 10000);
return deferred.promise();
}
Promise 에 등록된 callback 들을 Deferred 가 각 상황에 맞게 호출해주는 방식입니다.
```then()``` 함수를 이용하면 아래와 같이 구현할 수 있습니다.
### js
var timer;
(function process() {
$('#result').html('waiting…');
var deferred = $.Deferred();
timer = setInterval(function() {
deferred.notify();
}, 1000);
setTimeout(function() {
clearInterval(timer);
deferred.resolve();
}, 10000);
return deferred.promise();
})().then(function() { $('#result').html('done.'); },
null,
function() { $('#result').html($('#result').html() + '.'); });
#h3 References
- http://www.htmlgoodies.com/beyond/javascript/making-promises-with-jquery-deferred.html
- https://api.jquery.com/category/deferred-object/