$.ajax() 함수에서 사용되는 콜백 함수 success 와 complete 차이

1. success 콜백 함수

• 호출 시점: 요청이 성공적으로 완료되었을 때 호출됩니다.
• 주요 기능: 서버에서 정상적인 응답을 받았을 때 실행됩니다. 주로 응답 데이터를 처리하거나, 성공 메시지를 사용자에게 표시하는 등의 작업에 사용됩니다.
• 특징: 성공 응답을 받았을 때만 호출되며, 서버 응답이 HTTP 상태 코드 200번대일 때(정상 성공 응답) 호출됩니다.

예시:

$.ajax({
    url: '/example',
    type: 'POST',
    data: { key: 'value' },
    success: function(response) {
        console.log('요청 성공:', response); // 서버 응답을 성공적으로 받았을 때 실행
    }
});

 

2. complete 콜백 함수

• 호출 시점: 요청이 완료된 후(성공이든 실패든 상관없이) 항상 호출됩니다.
• 주요 기능: 요청이 완료된 후 후속 처리 작업을 할 때 사용됩니다. 주로 로딩 스피너 종료, 버튼 활성화 등, 요청의 성공 여부와 상관없이 공통적으로 처리할 작업이 있을 때 사용됩니다.
• 특징: 서버 응답이 성공적이든 실패하든 무조건 실행됩니다. 이 콜백은 서버에서의 응답 상태에 상관없이 마지막에 호출됩니다.

예시:

$.ajax({
    url: '/example',
    type: 'POST',
    data: { key: 'value' },
    success: function(response) {
        console.log('요청 성공:', response); // 성공 시 실행
    },
    error: function(xhr, status, error) {
        console.error('요청 실패:', error); // 실패 시 실행
    },
    complete: function() {
        console.log('요청 완료'); // 성공, 실패와 상관없이 무조건 실행
    }
});

차이점 요약

• success: 요청이 성공했을 때만 호출됩니다. (예: HTTP 상태 코드 200번대)
• complete: 요청이 성공 여부에 상관없이 항상 호출됩니다. 이는 success나 error 콜백 이후에 호출됩니다.

실제 사용 예시

자동 저장 로직에서, success와 complete는 아래와 같은 상황에서 사용됩니다:

• success: 자동 저장이 성공했을 때 사용자에게 "자동 저장되었습니다" 같은 성공 메시지를 보여주는 데 사용됩니다.
• complete: 자동 저장 작업이 완료되면(성공 또는 실패 상관없이) 저장 버튼을 다시 활성화하는 데 사용됩니다.

$.ajax({
    url: '/autoSave',
    type: 'POST',
    data: formData,
    success: function(response) {
        // 저장 성공 처리
        showNotification('자동 저장되었습니다.', 'success');
    },
    error: function(xhr, status, error) {
        // 저장 실패 처리
        showNotification('자동 저장 실패.', 'error');
    },
    complete: function() {
        // 저장 완료 후 버튼을 다시 활성화
        enableSaveButton(); // 성공이든 실패든 무조건 실행
    }
});