Question

昨天StackOverflow上的一位成员帮助我调用了AJAX，但现在我遇到了问题。

代码实际上是一个循环，它将请求发送到多个REST API并将结果作为对象保存在数组中。

现在问题是我无法从该数组中读取对象。

我想读取对象并编写新对象或更新该数组中的现有对象。

代码：

$(document).ready(function() {
var items = [];
var types = [{
        suffix: '_ONOFF',
        handler: function(data, $el) {
            $el.prop('checked', data == 'ON');
        }
    },
    {
        suffix: '_URA',
        handler: function(data, $el) {
            $el.val(data);
        }
    },
    {
        suffix: '_MINUTA',
        handler: function(data, $el) {
            $el.val(data);
        }
    },
    {
        suffix: '_PO',
        handler: function(data, $el) {
            if (data == "ON") {
                $el.css('background', 'blue');
            } else if (data == "OFF") {
                $el.css('background', 'black');
            }
        }
    },
    {
        suffix: '_TO',
        handler: function(data, $el) {
            if (data == "ON") {
                $el.css('background', 'blue');
            } else {
                $el.css('background', 'black');
            }
        }
    },
    {
        suffix: '_SR',
        handler: function(data, $el) {
            if (data == "ON") {
                $el.css('background', 'blue');
            } else {
                $el.css('background', 'black');
            }
        }
    },
    {
        suffix: '_CE',
        handler: function(data, $el) {
            if (data == "ON") {
                $el.css('background', 'blue');
            } else {
                $el.css('background', 'black');
            }
        }
    },
    {
        suffix: '_PE',
        handler: function(data, $el) {
            if (data == "ON") {
                $el.css('background', 'blue');
            } else {
                $el.css('background', 'black');
            }
        }
    },
    {
        suffix: '_SO',
        handler: function(data, $el) {
            if (data == "ON") {
                $el.css('background', 'blue');
            } else {
                $el.css('background', 'black');
            }
        }
    },
    {
        suffix: '_NE',
        handler: function(data, $el) {
            if (data == "ON") {
                $el.css('background', 'blue');
            } else {
                $el.css('background', 'black');
            }
        }
    },
    {
        suffix: '_VALVE_SET',
        handler: function(data, $el) {
            $el.text(data);
        }
    },
];

for (var r = 1; r < 11; r++) {
    var result = {};
    types.forEach(function(type) {
        var key = `HVAC_VALVE01_SCHED${r}${type.suffix}`;
        $.ajax({
            type: "GET",
            url: `http://192.168.1.111:8080/rest/items/${key}/state`
        }).done(function(data) {
            type.handler(data, $('.' + key));
            result[key] = data;
        });
    });
    items.push(result);
}
console.log(items);
console.log(items['HVAC_VALVE01_SCHED1_ONOFF']);
});

Answer 1

您console.log中没有任何内容，因为每个AJAX调用都是异步，并且循环后的代码执行之前 API调用的结果将是接收。当我处理你想要同时进行的多个异步操作时，我通常使用Promise.all，我真的很喜欢它。 Promise.all接受一系列承诺，您可以处理then和catch块内的响应，与常规单一承诺一样。但请注意，Promise.all接受一个数组，并且在then块中你也会得到一个数组，一组响应。

var apiCalls = [];
for (var r = 1; r < 11; r++) {
    var result = {};
    types.forEach(function(type) {
        var key = `HVAC_VALVE01_SCHED${r}${type.suffix}`;
        apiCalls.push(
            $.ajax({
                type: "GET",
                url: `http://192.168.1.111:8080/rest/items/${key}/state`
            })
        )
    });
}
Promise.all(apiCalls)
    .then(function(response) {
        // "response" will contain the results of ALL you AJAX calls from "apiCalls" array
        // "response" will be an array of responses, so you have to merge this response with "items" array by yourself
        console.log(response); // here you can do all operations like "push" to existing array and so on
    })
    .catch(function(err) {
        console.error(err);
    });

JavaScript读取数组中的对象

1 个答案: