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]);