jQuery Ajax 호출에서 성공 콜백 함수 분리

jQuery ajax를 사용하여 서버에서 데이터를 검색할 때 성공을 정의하는 것이 일반적인 관행입니다. .ajax() 블록 내의 콜백 함수. 이는 콜백 처리를 AJAX 호출과 긴밀하게 결합하여 유연성과 재사용성을 제한합니다.

.ajax() 블록 외부에서 성공 콜백을 정의하려면 일반적으로 반환된 데이터를 저장하는 변수가 선언됩니다. 그러나 지연된 객체를 사용하는 보다 현대적인 접근 방식이 권장됩니다.

jQuery 1.5부터 지연된 객체는 AJAX 호출과 같은 비동기 작업을 처리하는 더 나은 방법을 제공합니다. 이를 달성하는 방법은 다음과 같습니다.

function getData() {
    return $.ajax({
        url : 'example.com',
        type: 'GET'
    });
}

function handleData(data /* , textStatus, jqXHR */ ) {
    alert(data);
    //do some stuff
}

getData().done(handleData);

이 접근 방식은 AJAX 호출에서 콜백 처리를 분리하여 여러 콜백, 오류 처리 및 비동기 이벤트 동기화를 쉽게 허용합니다.

예를 들어 :

// Timer for demo purposes, resolves itself after 5 seconds
var timer = $.Deferred();
setTimeout(timer.resolve, 5000);

// Get data using AJAX and attach done and error handlers
var ajax = getData().done(handleData).fail(error);

// Wait for both AJAX and timer to finish before continuing
$.when(timer, ajax).done(function() {
    // Both AJAX and 5s timer have finished
});

// Additional callbacks can be added even after AJAX call finishes
ajax.done(function(data) {
    //Do some stuff with data
});

이는 지연된 객체의 강력함을 보여주며 jQuery 애플리케이션의 비동기 작업에 대한 더 큰 제어와 유연성을 제공합니다.