Kann jemand ausführlich erklären, wie diese zwei Anrufe unterschiedlich waren

Question

Das passiert, wenn ich die folgende Funktion ausführe, wird das AjaxCallFive nur ausgeführt, nachdem das AjaxCallFour ausgeführt wird.

var ajaxOptionsFour = { 
    type: "GET", 
    url: '/Home/AjaxCallFour', 
    data: { value: '10' }, 
    success: updatePage, 
    error: printError 
}; 

var ajaxFive = function() { 
    return { 
     type: "GET", 
     url: '/Home/AjaxCallFive', 
     data: { value: '10', dumyContent:"" }, 
     success: updatePage, 
     error: printError 
    } 
} 

var a1 = $.ajax(ajaxOptionsFour); 
    var a2 = a1.then(
     function (data) { 
      // .then() returns a new promise 
      return $.ajax({ 
       type: "GET", 
       url: '/Home/AjaxCallFive', 
       data: { value: '10', dumyContent: data.data }, 
       success: function (response) { console.log(response.dumyContent) }, 
       error: function (response) { console.log() } 
      }); 
     }); 

a2.done(function (data) { 
    console.log(data.data + data.waitValue); 
}); 

Allerdings, wenn ich die a2 variable Zeile wie unterhalb der gleichzeitig genannt zwei Funktion zu ändern, wird AjaxCallFive ohne warten, ausgeführt für die AjaxCallFour zuerst ausgeführt wird.

var a2 = a1.then($.ajax(ajaxFive())); 

Answer 1

Sie müssen noch eine Handler-Funktion an übergeben. Sie geben das Versprechen von $.ajax() im Code zurück

var a2 = a1.then($.ajax(ajaxFive())); 

Der Rückgabewert von diesem $.ajax() Anruf ist nicht das, was .then() erwartet.

Es sollte Indem

var a2 = a1.then(function(data) { 
    return $.ajax(ajaxFive()); 
}); 

sein beginnt in einer Funktion .then(), Ihr zweiter Ajax-Aufruf wird nicht bis zum Versprechen Mechanismus tatsächlich Anrufe, die funktionieren.

Zusätzlich können Sie ajaxFive() verbessern, so dass Sie in den zurückgegebenen Daten aus dem vorherigen Schritt passieren können:

var ajaxFive = function (content) { 
    return { 
     type: "GET", 
     url: '/Home/AjaxCallFive', 
     data: { value: '10', dumyContent: content }, 
     success: updatePage, 
     error: printError 
    }; 
}; 

und dann:

var a2 = a1.then(function(data) { 
    return $.ajax(ajaxFive(data.data)); 
});