在另一個AJAX調用之前重用JavaScript AJAX調用

Question

我有兩個按鈕都執行AJAX調用：

$("#save").click(function() {
    $.ajax({
        type: "POST",
        url: saveEntryURL,
        data: { id: $("#id").val() },
        success: function(r) {
            ...
        },
        error: function(r) {
            ...
        }
    })
})

$("#tag-as-final").click(function() {
    $.ajax({
        type: "POST",
        url: finalizeEntryURL,
        data: { id: $("#id").val() },
        success: function(r) {
            ...
        },
        error: function(r) {
            ...
        }
    })
})

要求是，當用戶單擊“完成”按鈕時，系統將首先執行保存，然后再將其實際標記為“完成”。 為了重用附加到保存按鈕的代碼，我在實際的AJAX調用之前調用了保存按鈕的onclick偵聽器，如下所示：

$("#tag-as-final").click(function() {
    $("#save").click()
    ^^^^^^^^^^^^^^^^^^    
    $.ajax({
        type: "POST",
        url: finalizeEntryURL,

但是，由於兩個AJAX調用都是異步的，因此不會執行“先保存后保存”的行為。 我需要一個接一個地運行，但不能使保存按鈕的AJAX調用同步（發生標記時，我還在做很多其他事情）。 我知道這很愚蠢，但我在想類似的東西...

$("#tag-as-final").click(function() {
    $("#save").click().peformAsyc()
                       ^^^^^^^^^^^^
    $.ajax({
        type: "POST",
        url: finalizeEntryURL,

...這將迫使它先完成鏈接功能，然后再繼續操作，但是我知道這是不可用的。 有什么辦法嗎？ 我目前的解決方法是將相同的save AJAX函數放置在finalize AJAX函數中，盡管它不允許我編寫DRY（不要重復自己）：

$("#tag-as-final").click(function() {
    $.ajax({
        type: "POST",
        url: saveEntryURL,
        data: { id: $("#id").val() },
        success: function(r) {
            ...
            $.ajax({
                type: "POST",
                url: finalizeEntryURL,
                data: { id: $("#id").val() },
                success: function(r) {
                    ...
                },
                error: function(r) {
                    ...
                }
            })
        },
        error: function(r) {
            ...
        }
    })
})

Answer 1

這很簡單，最好使用jquery“ promises”。 像這樣：

var generalSettings = { }; //Settings for AJAX call.
var jqXHR = $.ajax(generalSettings); //Do AJAX call.
generalSettings.data = 'newdata'; //update generalSettings
jqXHR.done(function(data){
   $.ajax(generalSettings); //New Petition with updated settings.
});

這使用的是ES6 Promise和jQuery Promise：

function doAjaxAsPromise(settings){
    return new Promise(function(resolve){
        var jqXHR = $.ajax(settings);
        jqXHR.done(function(data){
            resolve(data);
        });
    });
}

var settings = { };
var petition = doAjaxAsPromise(settings);
var secondpetition = petition.then(function(data){
    //work with data
    //new settings
    var settings = { };
    return doAjaxAsPromise(settings);
});
var thirdpetition = secondpetition.then(function(data){
    //work with data
    //new settings
    var settings = { };
    return doAjaxAsPromise(settings);
});
//If needed to reuse settings object outside promise scope:
//var settings = Object.create(settings);

您可以為代碼重用做一些其他事情：

function save(settings) {
    var prom = doAjaxAsPromise(settings);
    return prom.then(function(data){
        //do something with your data.
    });
}

function tagAsFinal(savedPromise, settings){
   return savedPromised.then(function(){
       var prom = doAjaxAsPromise(settings);
       return prom.then(function(data){
          //work with data;
       });
   });
}

$('save').on('click', function(){
  save(settings); //settings = $.ajax settings.
});

$('tagAsFinal').on('click', function(){
  var generalSettings = { };
  var settingsone = Object.create(generalSettings);
  var settingstwo = Object.create(generalSettings);
  var saved = save(settingsone); //$.ajax settings.
  tagAsFinal(saved, settingstwo);
});
//Can still be reduced.