[jQuery; 제이쿼리] Ajax에서 success와 done의 차이점 (Deferred 객체)

jQuery Logo

저번 시간(type와 method의 차이)에 이어서 궁금한걸 계속 해결해보겠다.

이전글이 궁금하신분들은 아래 링크 참조 부탁드립니다.

https://daddydontsleep.tistory.com/75

[jQuery; 제이쿼리] Ajax - type / method 차이점 및 사용법

그렇다 오늘은 `success`와 `done`에 대해 알아보자.

jQuery의 Ajax에서 `success`와 `done`은 둘 다 Ajax 요청이 성공적으로 완료되었을때 실행되는 콜백 함수이다.

하지만 두 개의 용어 사이에는 차이점이 있습니다.

`success` 콜백 함수는 예전 버전의 jQuery에서 사용되던 방식으로(type과 비슷한 맥락이다), Ajax 요청이 성공적으로 완료되었을 때 호출된다.

예를 들어 다음과 같이 `success` 콜백 함수를 사용할 수 있다.

$.ajax({
	url: 'daddydontsleep.tistory.com/api',
    method: 'GET',
    ...,
    success: function(response) {
    	// Ajax 요청이 성공했을 때 실행되는 코드
        console.log(response);
    },
    error: function(xhr, status, error) {
        // Ajax 요청이 실패한 경우 처리할 로직
        console.error(error);
  	}
});

반면에 `done` 메서드는 jQuery 1.8 버전 이후부터 사용되는 Deferred 객체를 기반으로 동작한다.

`done` 메서드는 Ajax 요청이 성공하거나 실패하더라도 항상 호출된다.

즉, 성공적인 응답이든 실패적인 응답이든 상관없이 실행된다.

예를 들어, 다음과 같이 `done` 메서드를 사용할 수 있다.

$.ajax({
	url: 'daddydontsleep.tistory.com/api',
    method: 'GET',
    ...
}).done(function(response) {
	// Ajax 요청이 성공했을 때 실행되는 코드
    console.log(response);
}).fail(function(xhr, status, error) {
	// Ajax 요청이 실패했을 때 실행되는 코드
	console.error(error);
});

따라서, `success`는 Ajax 요청의 성공에만 집중하고, `done`은 성공 및 실패 모두에 대한 처리를 할 수 있다는 차이점이 있다.

일반적으로는 `done`를 사용하여 Ajax 요청의 성공 및 실패 상태를 모두 다루는 것이 더 권장되는 방법이다.

---

Deferred 객체가 뭐야?

Deferred 객체는 jQuery에서 비동기 작업을 다루기 위한 기능을 제공하는 객체이다.

이 객체는 비동기 작업의 상태와 결과를 추적하고, 해당 작업이 성공했을 때나 실패했을 때 콜백 함수를 실행할 수 있도록 도와줍니다.

Deferred 객체는 주로 Ajax 요청과 같은 비동기 작업에서 사용됩니다. 예를 들어, Ajax 요청을 보낼 때 Deferred 객체를 반환받아 해당 객체의 메서드를 호출하면서 비동기 작업의 상태를 추적하고, 작업이 완료되면 콜백 함수를 실행 할 수 있습니다.

Deferred 객체의 주요 메서드로는 다음과 같은 것들이 있습니다.

• done() : 작업이 성공적으로 완료되었을 때 실행할 콜백 함수를 등록합니다.
• fail() : 작업이 실패했을 때 실행할 콜백 함수를 등록합니다.
• always() : 작업이 성공하거나 실패하더라도 항상 실행할 콜백 함수를 등록합니다.
• then() : 작업이 성공적으로 완료되었을 때와 실패했을 때 가각 다른 콜백 함수를 등록합니다.

Deferred 객체를 사용하면 비동기 작업의 상태를 추적하고, 작업이 완료되었을때 필요한 동작을 수행할 수 있습니다. 이를 통해 코드의 가독성과 유지 보수성을 높일 수 있습니다.

[reference]

jQuery.Deferred() | jQuery API Documentation

jQuery.Deferred() | jQuery API Documentation

끝.