有人可以深入解释这两个电话是如何不同的

时间:2017-04-25 12:56:16

标签: javascript ajax promise

当我执行以下函数时会发生这种情况,只有在执行AjaxCallFour之后才执行AjaxCallFive。

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);
});

但是,如果我将a2变量行更改为同时调用的两个函数,则执行AjaxCallFive而不等待AjaxCallFour首先执行。

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

1 个答案:

答案 0 :(得分:2)

您仍然需要将处理函数传递给.then()。您已在代码

中传递从$.ajax()返回的承诺
var a2 = a1.then($.ajax(ajaxFive()));

$.ajax()次调用的返回值不是.then()预期的值。

应该是

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

通过将函数传递给.then(),您的第二个ajax调用将一直开始,直到Promise机制实际上调用该函数。

此外,您可以增强ajaxFive(),以便您可以传入上一步中返回的数据:

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

然后:

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