Question

我正在尝试制作多个ajax请求，然后仅在完成所有ajax请求后显示一些内容。我知道我应该使用jQuery promises，但我不完全确定它们是如何工作的。

这是我的代码：

//make first ajax request
$.ajax({
    url: 'http://api.com',
    success: function(result) {

        var promises = [];

        //for each result
        for(var i = 0; i < result.length; i++) {

            //make another ajax request using
            //some of the returned data and
            //define it as a promise

            var promise = $.ajax({
                url: 'http://api.com&param='+result.paramVal,
                success: function(result) {

                      return result;
                }
            });

            //push promise into array
            promises.push(promise);
        }

        //when each promise in the promises array is complete
        $.when.apply($, promises).then(function() {

            console.log(promises);

        });
    }
});

这似乎有效，但为了更好地组织这段代码，我希望将所有这些代码放入一个对象中，然后将后续的ajax调用抽象到它自己的方法中。我的代码如下所示：

var myObject = {

    firstRequest: function() {

        $.ajax({
            url: 'http://api.com',
            success: function(result) {

                var promises = [];

                for(var i = 0; i < result.length; i++) {

                    var promise = myObject.secondRequest(result.param);

                    promises.push(promise);
                }

                $.when.apply($, promises).then(function() {
                    myObject.displayContent(promises));
                });
            }
        });

    },

    secondRequest: function(paramVal) {

        $.ajax({
            url: 'http://api.com&param='+result.paramVal,
            success: function(result) {

                  return result;
            }
        });

    },

    displayContent: function(promises) {

        console.log(promises);

    }

};

在此示例中，运行myObject.displayContent后，promises中的每个数组项都为undefined。我认为这是因为myObject.secondRequest实际上并不是一个承诺本身（此函数中的ajax请求是实际的承诺）。我怎样才能使这种安排有效？

更新

将return添加到我的ajax承诺有效，但我无法访问返回的ajax对象中的responseJSON。

secondRequest: function(paramVal) {

        return $.ajax({
            url: 'http://api.com&param='+result.paramVal,
            success: function(result) {

                  return result;
            }
        });

    },

以下是从我的$.when.then()回调中返回的其中一个对象的图像。我可以访问readyState属性，但不能访问responseJSON属性。

ajax object

Answer 1

您必须将功能传递给.then，但您立即执行myObject.displayContent。它应该是：

$.when.apply($, promises).then(function() {
    myObject.displayContent(promises)
});

如果您实际上并不需要访问承诺本身，请直接传递该功能：

$.when.apply($, promises).then(myObject.displayContent);
// or with `$.proxy` if you need `this` to refer to the object
$.when.apply($, promises).then($.proxy(myObject, 'displayContent'));

您还必须返回来自secondRequest函数的承诺：

secondRequest: function(paramVal) {
   return $.ajax(...);
}

否则promise将在

中undefined

var promise = myObject.secondRequest(result.param);

在引用对象的方法时如何使用jQuery promise？

更新

1 个答案: