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

I need to build an array of objects by resolving an array of promises that was built based on another array.

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

Let's say I have an array of letters = ['a', 'b', 'c']. Then, I map it making Ajax calls using each letter as a param, like this:

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

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

As a result, I get an array with ajax promises. Then I resolve it like this:

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

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

The log is printing the original response for every ajax call. Everything works fine until then. But I don't want the original responses, I want custom objects so I've tried using the Ajax's success callbacks to create them, like this:

日志正在为每个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);
});

The problem is the success callback doesn't interfere at the array creation. In fact, I can change the return to ANYTHING in the callback and it doesn't make any difference, the code still returns an array of the original responses.

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

When I did that with Angular using the $http service it worked well, but with JQuery using $.getJSON doesn't work and I can't understand why this is happening.

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

Thank you all in advance.

谢谢大家。

2 个解决方案

#1

Your callback return value is ignored because you have used done. What you actually wanted is to use then which creates a new promise for the result of the callback:

您的回调返回值将被忽略，因为您已使用完成。你真正想要的是使用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
            };
        });
});

The done method is not chainable! There is hardly ever a reason to use it over then.

完成方法不可链接！几乎没有理由在那时使用它。

#2

As I mentioned in my comment, I think you just need to map the response data for each jqXHR to the custom object you want.

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

So something like:

所以类似于：

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

This is assuming var result; was declared in a scope that would be accessible here.

这是假设var结果;在这里可以访问的范围内声明。

Here's a full sample:

这是一个完整的示例：

<!-- 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>

And the sample json.php file:

和示例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);
?>

So, at the end of the day, result is equal to:

所以，在一天结束时，结果等于：

[
  {custom_attr: "a"},
  {custom_attr: "b"},
  {custom_attr: "c"}
]

#1