使用 jQuery Promises 連結三個非同步呼叫

在非同步程式設計中，連續對 API 或伺服器進行多次呼叫是很常見的。為了有效地處理這些調用，最好將它們連結在一起，確保每個調用在執行下一個調用之前完成。有了 jQuery Promise，這個連結過程就可以輕鬆完成。

考慮以下場景，其中需要依次進行三個 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 物件代表對應函數的 Promise。這允許函數按順序鏈接，一個函數的輸出作為輸入傳遞給下一個函數。

參數 data、textStatus 和 jqXHR 來自前一個函數中的 $.ajax() 呼叫。例如，first() 提供 secondary()，second() 提供third()，傳遞任何相關資料。

要查看此連結的實際效果，請使用 $.when('foo' 進行現場演示）以兌現承諾，如下所示。