promise, done 사용 예제
-Done
#done은 실제로 $.ajax()에 의해 반환 된 jqXHR 개체의 일부이며, jQuery 1.8에서 success을 대체한다.
#done은 ajax 함수에서 성공 콜백 함수를 분리하여 나중에 수정하지 않고 자신의 핸들러를 추가 할 수 있다.
#기존의 ajax의 done => success, fail => error 및 always => complete의 동등성을 매핑
#then, done의 차이.. (호출 체인 (chaining), done 는 함수체이닝 가능, ex)done().done().done() 가능 then 생성하지 않음)
예제)
// set success action before making the request
$.ajax({
url: 'url.do',
success: function(){
alert('AJAX successful');
}
});
// set success action just after starting the request
var jqxhr = $.ajax("url.do") .done(function() { alert("success"); });
jQuery.ajax() 는 jQuery XMLhttpRequest(jqXHR) 을 반환하기 때문에 아래와 같은 방식으로도 구현이 가능
var jqxhr = $.ajax({ url: "/test/ajax.do" });
jqxhr.done(successFunction);
jqxhr.done(successFunction1);
jqxhr.fail(errorFunction);
jqxhr.always(alwaysFn);
-Promise
#Promise는 IE11 안먹힘..
#Promise는 자바스크립트 비동기 처리에 사용되는 객체다.
여기서 자바스크립트의 비동기 처리란 ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성’을 의미
#프로미스의 3가지 상태(states)
프로미스를 사용할 때 알아야 하는 가장 기본적인 개념이 바로 프로미스의 상태(states)다.
여기서 말하는 상태란 프로미스의 처리 과정을 의미한다. new Promise()로 프로미스를 생성하고 종료될 때까지 3가지 상태를 갖는다.
- Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태
- Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
- Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태
여러가지 정의 방법
1. 첫번째
new Promise(function(resolve, reject){
setTimeout(function() {
resolve(1); //resolve은 성공, reject 실패
}, 2000);
})
.then(function(result) {
console.log(result); // 1
return result + 10;
})
.then(function(result) {
console.log(result); // 11
return result + 20;
})
.then(function(result) {
console.log(result); // 31
});
2. 두번째
var _promise = function (param) {
return new Promise(function (resolve, reject) {
// 비동기를 표현하기 위해 setTimeout 함수를 사용
window.setTimeout(function () {
// 파라메터가 참이면,
if (param) {
// 해결됨
resolve("해결 완료");
}else{// 파라메터가 거짓이면,
// 실패
reject(Error("실패!!"));
}
}, 3000);
});
};
//Promise 실행
_promise(true)
then(function(text) {
// 성공시
console.log(text);
}, function (error) {
// 실패시
console.error(error);
});
3. 세번째
jQuery 1.5 버전 이후부터는 아래와 같이 done(), fail(), always() 를 이용하여 결과에 대한 처리를 지정한다.
var successFunction = function(data){
console.log('성공 콜백함수 실행 첫번째');
}
var successFunction1 = function(data){
console.log('성공 콜백함수 실행 두번째');
}
var errorFunction = function(request, status, error) {
console.log('실패일때 실행');
}
var alwaysFn = function(){
console.log('언제나 실행');
}
var promise = $.ajax({ url: '/test/ajax.do' });
promise.then(successFunction).then(successFunction1).then(errorFunction);
4. 네번째
let promise = new Promise((resolve, reject) => {
setTimeout( () => {
resolve(); //then 실행됨
//reject(); .catch( 실행됨
},3000 ); //비동기 실행 연출을 위한 셋타임아웃 3초
});
promise
.then( () => console.log('1') )
.then( () => console.log('2') )
.then( () => console.log('3') )
.catch( () => console.log('catch') );
5. 다섯번째
jQuery 1.8 버전 이후부터는 then() 함수를 사용하여 Promise 패턴을 적용할 수 있다.
then() 의 첫번째 인자는 성공에 대한 액션, 두번째 인자에는 실패에 대한 액션을 지정할 수 있다.
$.ajax({url: "/ajax.do"}).then([successFunction, successFunction1], [errorFunction errorFunction1]);