jQuery Promise ($.Deferred) 사용법

2025.03.01 - [개발/자바스크립트] - JavaScript Promise 개념과 사용법

JavaScript Promise 개념과 사용법

 

jQuery에서 Promise 패턴을 사용하려면 $.Deferred 객체를 활용합니다.
$.Deferred는 비동기 작업을 수행하고, 해당 작업이 완료되면 .resolve(), 실패하면 .reject()를 호출하여 작업의 상태를 관리할 수 있습니다.
또한 $.when()을 사용하여 여러 개의 비동기 작업을 동시에 처리할 수도 있습니다.

---

1. 기본적인 $.Deferred 사용법

(1) $.Deferred 생성 및 사용

function asyncTask() {
    let deferred = $.Deferred();

    setTimeout(function () {
        if (Math.random() > 0.5) {
            deferred.resolve("작업 성공!"); // 성공
        } else {
            deferred.reject("작업 실패!"); // 실패
        }
    }, 2000);

    return deferred.promise(); // Promise 객체 반환
}

// 사용 예제
asyncTask()
    .done(function (result) {
        console.log("성공:", result);
    })
    .fail(function (error) {
        console.error("실패:", error);
    })
    .always(function () {
        console.log("작업 종료");
    });

설명

• $.Deferred() 객체를 생성하고 비동기 작업을 실행.
• 성공하면 deferred.resolve(data), 실패하면 deferred.reject(error).
• .promise()를 반환하여 외부에서 done(), fail(), always()로 결과를 처리.

---

2. 여러 개의 Promise 병렬 처리

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

여러 개의 비동기 작업이 모두 완료될 때까지 기다릴 수 있습니다.

function asyncTask1() {
    let deferred = $.Deferred();
    setTimeout(() => deferred.resolve("첫 번째 작업 완료"), 1000);
    return deferred.promise();
}

function asyncTask2() {
    let deferred = $.Deferred();
    setTimeout(() => deferred.resolve("두 번째 작업 완료"), 2000);
    return deferred.promise();
}

$.when(asyncTask1(), asyncTask2()).done(function (result1, result2) {
    console.log(result1, result2); // "첫 번째 작업 완료", "두 번째 작업 완료"
}).fail(function () {
    console.log("하나 이상의 작업이 실패함");
});

설명

• $.when()을 사용하면 여러 개의 비동기 작업이 병렬로 실행됨.
• 모든 작업이 성공해야 .done()이 실행됨.
• 하나라도 실패하면 .fail()이 실행됨.

---

반응형

3. AJAX와 $.Deferred 함께 사용

jQuery의 $.ajax()는 기본적으로 Promise 객체를 반환하므로 .done(), .fail(), .always()를 사용할 수 있습니다.

$.ajax({
    url: "https://jsonplaceholder.typicode.com/todos/1",
    method: "GET"
}).done(function (data) {
    console.log("데이터 받아옴:", data);
}).fail(function () {
    console.log("데이터 요청 실패!");
}).always(function () {
    console.log("요청 완료");
});

설명

• $.ajax()는 기본적으로 Promise 기반으로 동작하여 .done(), .fail(), .always()로 처리 가능.

---

4. $.Deferred와 AJAX 조합

function fetchData() {
    let deferred = $.Deferred();

    $.ajax({
        url: "https://jsonplaceholder.typicode.com/todos/1",
        method: "GET"
    }).done(function (data) {
        deferred.resolve(data); // 성공 시 resolve
    }).fail(function () {
        deferred.reject("데이터 요청 실패"); // 실패 시 reject
    });

    return deferred.promise();
}

// 사용 예제
fetchData().done(function (data) {
    console.log("데이터:", data);
}).fail(function (error) {
    console.error(error);
});

설명

• AJAX 요청을 $.Deferred로 감싸서 커스텀 비동기 처리 가능.
• 성공하면 .resolve(), 실패하면 .reject().

---

728x90

5. async/await와 jQuery Promise ($.Deferred) 함께 사용

async/await 문법을 사용하여 더 직관적인 비동기 처리를 할 수도 있습니다.

function fetchData() {
    let deferred = $.Deferred();

    setTimeout(function () {
        deferred.resolve("데이터 로드 완료!");
    }, 2000);

    return deferred.promise();
}

async function getData() {
    try {
        let result = await fetchData();
        console.log(result);
    } catch (error) {
        console.error("에러 발생:", error);
    }
}

getData();

설명

• await를 사용하면 .then() 없이도 직관적인 코드 작성 가능.
• await는 Promise를 반환하는 함수에서만 사용 가능 ($.Deferred().promise()가 필요).

---

6. 정리

• $.Deferred는 jQuery에서 비동기 처리를 할 때 유용한 객체.
• .resolve(), .reject()로 상태를 변경하고, .done(), .fail()로 처리 가능.
• $.when()을 사용하면 여러 개의 비동기 작업을 병렬 실행할 수 있음.
• $.ajax()는 기본적으로 Promise를 반환하므로 .done()으로 쉽게 처리 가능.
• async/await과 함께 사용하면 가독성을 높일 수 있음.

→ jQuery 환경에서 비동기 처리를 보다 깔끔하게 관리하고 싶을 때 $.Deferred를 적극 활용하면 좋습니다.