Question

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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);
});

＆＃13;

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

当我使用$http服务使用Angular时，它运行良好，但使用$.getJSON的JQuery并不起作用，我无法理解为什么会发生这种情况。< / p>

提前谢谢大家。

Answer 1

正如我在评论中提到的，我认为您只需要将每个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"}
]

Answer 2

您的回调返回值将被忽略，因为您已使用var data = [{ "course": "First Aid", "courseDate": "2016-04-25T00:00:00-06:00" }, { "course": "CPR", "courseDate": "2016-04-06T00:00:00-06:00" }, { "course": "ASL1", "courseDate": "2016-01-07T00:00:00-06:00" }, { "course": "ASL2", "courseDate": "2016-03-25T00:00:00-06:00" }, { "course": "ASL2X", "courseDate": "2015-03-25T00:00:00-06:00" }]; data.sort(function (a, b) { var aa = a.courseDate.split(/\D/), bb = b.courseDate.split(/\D/); return bb[0] - aa[0] || aa[1] - bb[1] || aa[2] - bb[2]; }); document.write('<pre>' + JSON.stringify(data, 0, 4) + '</pre>');。你真正想要的是使用then为回调的结果创建一个新的承诺：

done

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上使用它。

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

2 个答案: