jQuery Deferred.resolveWith() 메서드의 활용 예제와 설명

jQuery의 Deferred.resolveWith() 메서드는 Deferred 객체를 성공 상태로 변경하는 데 사용됩니다. 이 메서드는 resolve()와 유사하지만, 성공 콜백을 호출할 때 컨텍스트(context)를 지정할 수 있습니다. 이를 통해 성공 콜백에서 특정 컨텍스트 내의 데이터나 함수 등을 활용할 수 있습니다. 이를 더 자세히 살펴보기 위해 다음과 같은 예제들을 제시해보겠습니다.

예제 1: 컨텍스트를 활용한 Ajax 요청 성공 처리

var context = {
  successMessage: "Ajax 요청 성공"
};

var deferred = $.Deferred();

$.ajax({
  url: "https://example.com/api",
  method: "GET",
  success: function(response) {
    deferred.resolveWith(context, [response]);
  },
  error: function(xhr, status, error) {
    deferred.reject("Ajax 요청 실패: " + error);
  }
});

deferred.promise()
  .then(function(response) {
    console.log(this.successMessage, response); // Ajax 요청 성공 {data: ...}
  })
  .fail(function(errorMessage) {
    console.error(errorMessage); // 출력되지 않음
  });

위 코드에서는 resolveWith()를 사용하여 성공 콜백을 호출할 때 context 객체를 전달합니다. 이를 통해 성공 콜백 내에서 successMessage 속성을 사용하여 성공 메시지를 출력합니다.

예제 2: 컨텍스트를 활용한 타임아웃 처리

var context = {
  successMessage: "작업 완료"
};

var deferred = $.Deferred();

setTimeout(function() {
  deferred.resolveWith(context);
}, 3000);

deferred.promise()
  .then(function() {
    console.log(this.successMessage); // 작업 완료
  });

위 코드는 resolveWith()를 사용하여 타임아웃 처리 시 context 객체를 전달합니다. 이를 통해 성공 콜백 내에서 successMessage 속성을 사용하여 작업 완료 메시지를 출력합니다.

예제 3: 컨텍스트를 활용한 조건부 성공 처리

var context = {
  successMessage: "값이 올바름"
};

function processValue(value) {
  var deferred = $.Deferred();

  if (value === "올바른 값") {
    deferred.resolveWith(context);
  } else {
    deferred.reject("값이 올바르지 않음");
  }

  return deferred.promise();
}

processValue("올바른 값")
  .then(function() {
    console.log(this.successMessage); // 값이 올바름
  })
  .fail(function(errorMessage) {
    console.error(errorMessage); // 출력되지 않음
  });

위 코드에서는 resolveWith()를 사용하여 성공 시 context 객체를 전달합니다. 이를 통해 성공 콜백 내에서 successMessage 속성을 사용하여 성공 메시지를 출력합니다.

이상으로 jQuery Deferred.resolveWith() 메서드의 활용 예제와 설명을 살펴보았습니다.