jQuery Promises로 세 가지 비동기 호출 연결

비동기 프로그래밍에서는 API나 서버를 연속해서 여러 번 호출하는 것이 일반적입니다. 이러한 호출을 효율적으로 처리하려면 호출을 서로 연결하여 다음 호출이 실행되기 전에 각 호출이 완료되도록 하는 것이 바람직합니다. jQuery Promise를 사용하면 이 연결 프로세스를 쉽게 수행할 수 있습니다.

3개의 HTTP 호출이 순서대로 이루어져야 하고 데이터가 한 호출에서 다른 호출로 전달되어야 하는 다음 시나리오를 고려해보세요.

function first() {
    ajax();
}

function second() {
    ajax();
}

function third() {
    ajax();
}

function main() {
    first().then(second).then(third);
}

이 예의 의도는 첫 번째 호출을 하고, 완료될 때까지 기다린 다음, 첫 번째 호출의 결과를 사용하여 두 번째 호출을 하고, 마지막으로 호출 결과를 사용하여 세 번째 호출을 하는 것입니다. 두 번째 전화. 그러나 이 코드는 예상대로 작동하지 않습니다. 이러한 호출을 올바르게 연결하려면 jQuery Promise를 올바르게 사용해야 합니다.

function first() {
    var deferred = $.Deferred();
    $.ajax({
        "success": function(resp) {
            deferred.resolve(resp);
        },
    });
    return deferred.promise();
}

function second(foo) {
    $.ajax({
        "success": function(resp) {
            // do something with the resp
        },
        "error": function(resp) {
            // handle the error
        },
    });
}

first().then(function(foo) {
    second(foo);
});

이 코드는 부분적인 솔루션을 제공하지만 세 가지 기능에 대한 연결은 아직 달성되지 않았습니다. 여러 호출을 연결하는 핵심은 각 함수에서 $.ajax()가 반환한 jqXHR 개체를 반환하는 데 있습니다. 이러한 객체는 Promise와 호환되며 .then()/.done()/.fail()/.always().

function first() {
    return $.ajax(...);
}

function second(data, textStatus, jqXHR) {
    return $.ajax(...);
}

function third(data, textStatus, jqXHR) {
    return $.ajax(...);
}

function main() {
    first().then(second).then(third);
}

이 수정된 코드에서 각 $.ajax() 호출에 의해 반환된 jqXHR 객체는 해당 함수의 약속을 나타냅니다. 이를 통해 한 함수의 출력이 다음 함수의 입력으로 전달되어 함수를 순차적으로 연결할 수 있습니다.

인수 data, textStatus 및 jqXHR은 이전 함수의 $.ajax() 호출에서 발생합니다. . 예를 들어, first()는 second()에 피드를 제공하고 second()는 third()에 피드를 제공하여 관련 데이터를 전달합니다.

이 연결이 실제로 작동하는 모습을 보려면 $.when('foo'를 사용한 라이브 데모를 참조하세요. ) 이행된 약속을 전달하는 방법은 다음과 같습니다.