构建Ajax调用数组时，JQueryAjax成功回调不起作用

JQuery Ajax success callback not work when building array of Ajax calls

本文关键字：JQueryAjax 成功 回调 不起作用 Ajax 调用 数组 构建      更新时间：2024-01-14

我需要通过解析基于另一个数组构建的promise数组来构建一个对象数组。

假设我有一个letters = ['a', 'b', 'c']数组。然后，我映射它，使用每个字母作为参数进行Ajax调用，如下所示：

var result = letters.map(function (letter) {
    return $.getJSON('myuri', { param: letter });
};

结果，我得到了一个带有ajax promise的数组。然后我这样解决：

Promise.all(result).then(function (response) {
    console.log(response);
});

日志正在打印每个ajax调用的原始响应。在那之前一切都很好。但我不想要原始的响应，我想要自定义对象，所以我尝试使用Ajax的成功回调来创建它们，比如：

var letters = ['a', 'b', 'c'];
var result = letters.map(function (letter) {
    return $.getJSON('myuri', { param: letter })
            // Chaining with success callback
            .done(function (response) {
                return {
                    'custom_attr': response.x,
                    'athor_custom_attr': response.y
                };
    });
});
Promise.all(result).then(function (response) {
    console.log(response);
});

问题是成功回调不会干扰数组的创建。事实上，我可以在回调中将返回更改为ANYTHING，这没有任何区别，代码仍然返回原始响应的数组。

当我使用$http服务使用Angular时，它运行得很好，但使用$.getJSON的JQuery不起作用，我不明白为什么会发生这种情况。

提前谢谢大家。

您的回调返回值被忽略，因为您使用了done。您实际想要的是使用then，它为回调的结果创建了一个新的承诺：

var result = letters.map(function (letter) {
    return $.getJSON('myuri', { param: letter })
        .then(function (response) {
            return {
                'custom_attr': response.x,
                'athor_custom_attr': response.y
            };
        });
});

done方法不可链接几乎没有理由在then上使用它。

正如我在评论中提到的，我认为您只需要将每个jqXHR的响应数据映射到您想要的自定义对象。

所以类似于：

Promise.all(result).then(function (response) {
    result = response.map(function(c) {
        return {
            'custom_attr': c.x,
            'another_custom_attr': c.y
        };
    });
});

这是假设var result;是在此处可访问的范围中声明的。

这是一个完整的样本：

<!-- index.html -->
<button class="load-ajax">Click To Make our AJAX calls!</button>
<script src="jquery.min.js"></script>
<script>
// Declare `result` in global scope.
var result;
$(document).ready(function() {
    $('.load-ajax').on('click', function(e) {
        e.preventDefault();
        var letters = ['a', 'b', 'c'];
        result = letters.map(function (letter) {
            return $.getJSON('json.php', { param: letter });
        });
        Promise.all(result).then(function (response) {
            result = response.map(function(c) {
                return { "custom_attr" : c.param };
            });
            console.log("DONE! Look at `result`");
        });
    });
});
</script>

以及示例json.php文件：

<?php
// json.php
header('Pragma: no-cache');
header('Cache-Control: no-store, no-cache, max-age=0, must-revalidate');
header('Content-Type: application/json');
echo json_encode($_GET);
?>

因此，在一天结束时，result等于：

[
  {custom_attr: "a"},
  {custom_attr: "b"},
  {custom_attr: "c"}
]
相关文章：