jQuery Deferred - 得到链式ajax调用的结果

时间:2020-12-08 14:31:24

following problem - I have to call ajax function number of times, and when all functions are complete, get all results into array. I came up with this:

以下问题 - 我必须多次调用ajax函数,当所有函数都完成后,将所有结果都放入数组中。我想出了这个:

function doAjax(xx){
var xdata = {json: $.toJSON({name: xx}),
            delay: 1};
return $.ajax({
    url:"/echo/json/",
    data:xdata,
    type:"POST"
});

}

var carr = [doAjax('a'),doAjax('b'),doAjax('c'),doAjax('d')]
var result = [];

$.when( carr )
    .done(function(data){
        console.log(data);
        $.each(data, function(ix,val){
            console.log(val.name);
        });
    });

Fiddle here: http://jsfiddle.net/Fkd9n/

在这里小提琴:http://jsfiddle.net/Fkd9n/

All seems to be working fine, the "console.log(data)" writes out the objects with response text, but the "console.log(val.name)" is always "undefined". So how to joint all results in one array once all calls are done?

一切似乎工作正常,“console.log(data)”用响应文本写出对象,但“console.log(val.name)”始终是“未定义”。那么一旦完成所有调用,如何将所有结果联合在一个数组中?

Thank you!

谢谢!

2 个解决方案

#1


7  

If you know how many Ajax-Calls you have, simply use $.when()

如果您知道有多少Ajax-Calls,只需使用$ .when()

$.when(doAjax('a'),doAjax('b'),doAjax('c'),doAjax('d'))
.then(function(result_a,result_b,result_c,result_d) {
    console.log("Result from query a: " + result_a);
    console.log("Result from query b: " + result_b);
    console.log("Result from query c: " + result_c);
    console.log("Result from query d: " + result_d);
});

If you don't know how many ajax-calls you will have, you can manage the deferred objects by yourself.

如果您不知道有多少个ajax调用,您可以自己管理延迟对象。

// altered version of doAjax()
function doAjax(number,dObject) {
    var xdata = {json: $.toJSON({name: number}), delay: 1};
    $.ajax({
        url:"/echo/json/",
        data:xdata,
        type:"POST",
        success: function(data) {
            results.push(data);
            dObject.resolve();
        }
    });
}

// array that will contain all deferred objects
var deferreds = [];

// array that will contain all results
var results = [];

// make the ajax calls
for (var i = 0; i < someNumber; i++) {
    var dObject = new $.Deferred();
    deferreds.push(dObject);
    doAjax(i,dObject);
}

// check if all ajax calls have finished
$.when.apply($, deferreds).done(function() {
    console.log(results);
});

The magic comes with the function apply() which makes an array to arguments for a function.

魔术带有函数apply(),它为一个函数的参数创建一个数组。

#2


4  

You can use pipe function to process resulting data.

您可以使用管道功能来处理结果数据。

$.when.apply($, carr).pipe(function(){
    console.log(arguments);
    return $.map(arguments, function(item){return item[0]});
})
    .done(function(data){
        console.log(data);
        $.each(data, function(ix,val){
            console.log(val.name);
        });
    });​

http://jsfiddle.net/Fkd9n/6/

http://jsfiddle.net/Fkd9n/6/

#1


7  

If you know how many Ajax-Calls you have, simply use $.when()

如果您知道有多少Ajax-Calls,只需使用$ .when()

$.when(doAjax('a'),doAjax('b'),doAjax('c'),doAjax('d'))
.then(function(result_a,result_b,result_c,result_d) {
    console.log("Result from query a: " + result_a);
    console.log("Result from query b: " + result_b);
    console.log("Result from query c: " + result_c);
    console.log("Result from query d: " + result_d);
});

If you don't know how many ajax-calls you will have, you can manage the deferred objects by yourself.

如果您不知道有多少个ajax调用,您可以自己管理延迟对象。

// altered version of doAjax()
function doAjax(number,dObject) {
    var xdata = {json: $.toJSON({name: number}), delay: 1};
    $.ajax({
        url:"/echo/json/",
        data:xdata,
        type:"POST",
        success: function(data) {
            results.push(data);
            dObject.resolve();
        }
    });
}

// array that will contain all deferred objects
var deferreds = [];

// array that will contain all results
var results = [];

// make the ajax calls
for (var i = 0; i < someNumber; i++) {
    var dObject = new $.Deferred();
    deferreds.push(dObject);
    doAjax(i,dObject);
}

// check if all ajax calls have finished
$.when.apply($, deferreds).done(function() {
    console.log(results);
});

The magic comes with the function apply() which makes an array to arguments for a function.

魔术带有函数apply(),它为一个函数的参数创建一个数组。

#2


4  

You can use pipe function to process resulting data.

您可以使用管道功能来处理结果数据。

$.when.apply($, carr).pipe(function(){
    console.log(arguments);
    return $.map(arguments, function(item){return item[0]});
})
    .done(function(data){
        console.log(data);
        $.each(data, function(ix,val){
            console.log(val.name);
        });
    });​

http://jsfiddle.net/Fkd9n/6/

http://jsfiddle.net/Fkd9n/6/