jQuery Deferred Object

Promise

//Promise 선언
function asyncFunc(param) {
  return new Promise(function(resolve, reject) {
    setTimeout(function() { // 비동기 함수
      param ? resolve("resolved!") : reject("rejected!");
    }, 2000);
  });
};

//Promise 실행
asyncFunc(true)
  .then(function(data) {
    // resolve가 실행된 경우(성공), resolve 함수에 전달된 값이 data에 저장
    console.log(data);
  },function(reason) {
    // reject가 실행된 경우(실패), reject 함수에 전달된 값이 reason에 저장
    console.log(reason);
    throw "Error:" + reason;
  }).catch(function(error) {
    console.error(error);
  });

jQuery Deferred Object

jQuery Deferred는 비동기 처리에 사용되는 Promise 객체를 지원하는 jQuery의 기능 중 하나.

1. Deferred 객체 생성 및 상태 변화:

   • $.Deferred()를 사용하여 Deferred 객체를 생성.
   • Deferred 객체는 상태를 가지며, resolve() 또는 reject()를 호출하여 상태를 변경할 수 있음.
   • 상태는 pending(처리 중), resolved(처리 성공), rejected(처리 실패) 세 가지.

2. Promise 객체 반환:

   • deferred.promise()을 사용하여 Deferred 객체가 가지고 있는 Promise 객체를 반환.
   • 반환된 Promise 객체는 더 이상 resolve() 및 reject()를 사용할 수 없어 비동기 처리 상태를 고정.

3. Chaining:

   • Deferred 객체는 비동기 함수를 chaining하여 연속적인 처리를 가능하게 함.
   • Chaining을 통해 Pyramid of Doom을 피할 수 있으며, 코드의 가독성을 높일 수 있음.

4. Callback 함수 등록:

   • Deferred 객체가 반환하는 Promise 객체는 done()(성공 콜백), fail()(실패 콜백), always()(항상 실행되는 콜백) 등을 등록할 수 있음.

5. $.when()을 이용한 병렬 처리:

   • $.when()을 사용하여 복수의 Deferred 객체를 병렬로 처리할 수 있음.
   • 모든 처리가 성공하면 resolved Promise를 반환하고, 하나라도 실패하면 rejected Promise를 반환.

6. Ajax와의 연동:

   • jQuery의 Ajax 함수들은 jQuery XMLHttpRequest(jqXHR) 객체를 반환하며, 이 객체는 Deferred 객체와 유사하게 동작.
   • Ajax 요청의 성공, 실패, 완료 시에 각각 콜백 함수를 등록할 수 있음.

이러한 jQuery Deferred를 활용하면 비동기 처리를 더 편리하게 다룰 수 있음.

// Deferred 객체 생성 및 Promise 반환
function sleep(ms) {
  var dfd = $.Deferred();
  setTimeout(function(){
    dfd.resolve();
  }, ms);
  return dfd.promise();
}

// Chaining을 이용한 비동기 처리
console.log(0);
sleep(1000)
  .then(function(){
    console.log(1);
    return sleep(1000);
  })
  .then(function(){
    console.log(2);
  });

// Callback 함수 등록
sleep(1000)
  .done(function() {
    console.log('resolved');
  })
  .fail(function() {
    console.log('rejected');
  })
  .always(function() {
    console.log('always');
  });

// 병렬 처리 - $.when()을 이용
$.when(sleep(1000), sleep(1500))
  .done(function() {
    console.log('Both resolved');
  })
  .fail(function() {
    console.log('At least one rejected');
  });

// Ajax와의 연동 - Ajax 요청 후 성공, 실패, 완료 시에 콜백 함수 등록
var jqxhr = $.ajax("/example")
  .done(function() {
    console.log("Ajax success");
  })
  .fail(function() {
    console.log("Ajax error");
  })
  .always(function() {
    console.log("Ajax complete");
  });


// Ajax 요청 완료 후 추가 콜백 등록
jqxhr.always(function() {
  console.log("Second complete");
});