Question

我在ECMA6中使用Promises编写了一个简单的脚本，但我现在将我写的内容转换为jQuery，以便与所有浏览器兼容，但我遇到的问题是{{1包含一个AJAX响应数组，而不是像脚本告诉它的产品名称数组。

基本上当$ .each中的所有AJAX请求都已完成时，我需要运行一个包含该数据的函数。我错过了什么？（自从我用jQuery编写任何内容以来已经有一段时间......）

availableDevices

Answer 1

无需将每个调用的结果存储在单独的数组中，您可以通过then方法访问每个响应：

var requests = [];
$.each(products, function (index, product) {
    requests.push($.ajax({
        type: 'GET',
        url: 'http://localhost:1337/api/product_availability?__url_path_param=' + formatProductName(product.product_name)        
    }));
});

$.when.apply($, requests).then(function() {
    console.log(arguments.length + " results returned");
    for(var i=0;i<arguments.length;i++){
        var arg = arguments[i];
       console.log(arg);   
    }
});

实例（使用jsfiddle json echo for demo）：http://jsfiddle.net/vzq4Lwm8/

在阅读了您的评论之后，有一个更好的解决方案，在$.Deferred()电话上使用complete和$.ajax功能的组合：

var deferreds = $.map(products, function (product) {
    var formattedProduct = formatProductName(product)
    var defer = $.Deferred();
    $.ajax({
        type: 'GET',
        url: 'http://localhost:1337/api/product_availability?__url_path_param=' + formattedProduct,
        complete: function (response) {
            if (response.status == 200) {
                defer.resolve(formattedProduct);
            }
            else{
                defer.resolve(null);
            }
        }
    })
    return defer;
});


$.when.apply($, deferreds).then(function() {
    console.log(arguments.length + " results returned");
    var availableProducts = $.map(arguments, function(x) { return x });
    // availableProducts will only contain items which returned 200 response
});

现场演示：http://jsfiddle.net/vzq4Lwm8/1/

Answer 2

您对$.when的调用没有正确的语法，因为您正在为其提供数组。此外，使用此模式时，您必须将所有响应合并在一起，并在then()处理程序中使用它。像这样：

var requests = [];
var data = [];

$.each(products, function (index, product) {
    requests.push($.ajax({
        type: 'GET',
        url: 'http://localhost:1337/api/product_availability?__url_path_param=' + formatProductName(product.product_name),
        success: function (response) {
            // note you're not actually using the `response` var here at all...?
            return data.push(formatProductName(product.product_name));
        }
    }));
});

$.when.apply($, availableDevices).then(function() {
    console.log(data);
});

Answer 3

jQuery $.ajax()可以使用在success请求成功完成时调用函数的ajax参数，如docs

所以你的代码应该是：

$.each(products, function (index, product) {

    availableDevices.push($.ajax({
        type: 'GET',
        url: 'http://localhost:1337/api/product_availability?__url_path_param=' + formatProductName(product.product_name),
        complete: function (response) {
            if (response.status == 200) {
                return formatProductName(product.product_name);
            }
        },
        success:function(){ }
    }));

});

$ .each ajax请求完成后jQuery运行函数

3 个答案: