动态AJAX承诺链的jQuery [英] Dynamic AJAX promise chain with jQuery

问题描述

我的AJAX调用内置的内部循环。他们需要的顺序（同步）。我如何把它们连与jQuery？

  VAR阵列= ['一'，'二'，'三'];
VAR arrayLength = array.length;
对于（VAR arrayCounter = 0; arrayCounter＆LT; arrayLength; arrayCounter ++）{
    VAR ID =阵列[arrayCounter]
    的getData（ID）;

    功能的getData（ID）{
        $阿贾克斯（{
            网址：http://example.com/+ ID，
            数据类型：JSONP，
            成功：函数（D）{
                VAR响应= D;
                执行console.log（D）;
            }，
            错误：函数（）{
                警报（ERROR）;
            }
        }）;
    }
}
 

解决方案

使用该解决方案为：

  VAR阵列= ['一'，'二'，'三'];
VAR ID =阵列[0];
VAR数据=的getData（ID）;
对于（VAR I = 1; I＆LT; array.length;我++）{
    //或者只有最后的i将用于
    （函数（ⅰ）{
        数据= data.then（函数（）{
            返回的getData（数组[我]）;
        }）;
    }（一世））;
}

//另外，看到的getData如何更好地都可以。
功能的getData（ID）{
    返回$阿贾克斯（{
        网址：http://example.com/+ ID，
        数据类型：JSONP，
    }）。完成（功能（D）{
        VAR响应= D;
        执行console.log（D）;
    }），失败（函数（）{
        警报（错误）;
    }）;
}
 

顺便说一句，如果你使用了正确的诺言库，如蓝鸟，你会使用以下code：

  VAR阵列= ['一'，'二'，'三'];
Promise.reduce（阵列功能（数据ID）{
    返回data.promise.then（函数（结果）{
        返回{承诺：的getData（ID），结果：data.results.push（结果）};
    }）;
}，[]）。然后（功能（数据）{
    执行console.log（data.results）; // 好极了！
}）;

功能的getData（ID）{
    返回Promise.cast（$。阿贾克斯（{
        网址：http://example.com/+ ID，
        数据类型：JSONP，
    }）。完成（功能（D）{
        VAR响应= D;
        执行console.log（D）;
    }），失败（函数（）{
        警报（错误）;
    }））;
}
 

正如你所看到的，比较容易的方式读/写。

My AJAX calls are built inside of a for loop. They need to be in order (synchronous). How do I chain them with jQuery?

var array = ['One', 'Two', 'Three'];
var arrayLength = array.length;
for (var arrayCounter = 0; arrayCounter < arrayLength; arrayCounter++) {
    var id = array[arrayCounter];
    getData(id);

    function getData(id) {
        $.ajax({
            url: 'http://example.com/' + id,
            dataType: 'jsonp',
            success: function(d) {
                var response = d;
                console.log(d);
            },
            error: function() {
                alert("ERROR");
            }
        });
    }
}   

解决方案

The solution using for:

var array = ['One', 'Two', 'Three'];
var id = array[0];
var data = getData(id);
for (var i = 1; i < array.length; i++) {
    // Or only the last "i" will be used
    (function (i) {
        data = data.then(function() {
            return getData(array[i]);
        });
    }(i));
}

// Also, see how better the getData can be.
function getData(id) {
    return $.ajax({
        url: 'http://example.com/' + id,
        dataType: 'jsonp',
    }).done(function(d) {
        var response = d;
        console.log(d);
    }).fail(function() {
        alert('ERROR');
    });
}

By the way, if you used a proper promises library, such as bluebird, you'd use the following code:

var array = ['One', 'Two', 'Three'];
Promise.reduce(array, function(data, id) {
    return data.promise.then(function(result) {
        return { promise: getData(id), results: data.results.push(result) };
    });
}, []).then(function(data) {
    console.log(data.results); // yay!
});

function getData(id) {
    return Promise.cast($.ajax({
        url: 'http://example.com/' + id,
        dataType: 'jsonp',
    }).done(function(d) {
        var response = d;
        console.log(d);
    }).fail(function() {
        alert('ERROR');
    }));
}

As you can see, way easier to read/write.

这篇关于动态AJAX承诺链的jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！