JavaScript AJAX 请求循环答案

【问题标题】：JavaScript AJAX request loopJavaScript AJAX 请求循环
【发布时间】：2018-02-15 11:01:48
【问题描述】：

我正在处理 REST API 请求，我想从中获取一些数据并将其输出到网站上。

我做了一个 for 循环，开始收集所有数据，但问题是数据没有在网站上输出。

我使用 Chrome 工具检查并在网络选项卡下所有项目都已成功接收但未插入网页。

JS代码

$(document).ready(function(){
    // ARRAY FOR ITEMS
    var items = [];





    /* ***********************************************
    HVAC_VALVE01_SCHED01 - READ
    **************************************************
    */

    for(var r = 1; r < 11; r++) {
    var request = $.ajax
    ({
        type       : "GET",
        url        : "http://localhost:8080/rest/items/HVAC_VALVE01_SCHED" + r + "_ONOFF/state"
    });

    request.done( function(data) 
    {

        if(data == "ON") {
            $('.HVAC_VALVE01_SCHED' + r + '_ONOFF').prop('checked', true);
        } else {
            $('.HVAC_VALVE01_SCHED' + r + '_ONOFF').prop('checked', false);
        }

        items["HVAC_VALVE01_SCHED" + r + "_ONOFF"] = data;
    });

    /* */

    var request = $.ajax
    ({
        type       : "GET",
        url        : "http://localhost:8080/rest/items/HVAC_VALVE01_SCHED" + r + "_URA/state"
    });

    request.done( function(data) 
    { 
        $(".HVAC_VALVE01_SCHED" + r + "_URA").val(data);
        items["HVAC_VALVE01_SCHED" + r + "_URA"] = data;
    });

    /* */

    var request = $.ajax
    ({
        type       : "GET",
        url        : "http://localhost:8080/rest/items/HVAC_VALVE01_SCHED" + r + "_MINUTA/state"
    });

    request.done( function(data) 
    { 
        $(".HVAC_VALVE01_SCHED" + r + "_MINUTA").val(data);
        items["HVAC_VALVE01_SCHED" + r + "_MINUTA"] = data;
    });

    /* */

    var request = $.ajax
    ({
        type       : "GET",
        url        : "http://localhost:8080/rest/items/HVAC_VALVE01_SCHED" + r + "_PO/state"
    });

    request.done( function(data) 
    { 

        if(data == "ON") {
            $(".HVAC_VALVE01_SCHED" + r + "_PO").css('background', 'blue');
            items["HVAC_VALVE01_SCHED" + r + "_PO"] = "ON";
        } else {
            $(".HVAC_VALVE01_SCHED" + r + "_PO").css('background', 'black');
            items["HVAC_VALVE01_SCHED" + r + "_PO"] = "OFF";
        }
    });

    /* */

    var request = $.ajax
    ({
        type       : "GET",
        url        : "http://localhost:8080/rest/items/HVAC_VALVE01_SCHED" + r + "_TO/state"
    });

    request.done( function(data) 
    { 

        if(data == "ON") {
            $(".HVAC_VALVE01_SCHED" + r + "_TO").css('background', 'blue');
            items["HVAC_VALVE01_SCHED" + r + "_TO"] = "ON";
        } else {
            $(".HVAC_VALVE01_SCHED" + r + "_TO").css('background', 'black');
            items["HVAC_VALVE01_SCHED" + r + "_TO"] = "OFF";
        }
    });

    /* */

    var request = $.ajax
    ({
        type       : "GET",
        url        : "http://localhost:8080/rest/items/HVAC_VALVE01_SCHED" + r + "_SR/state"
    });

    request.done( function(data) 
    { 

        if(data == "ON") {
            $(".HVAC_VALVE01_SCHED" + r + "_SR").css('background', 'blue');
            items["HVAC_VALVE01_SCHED" + r + "_SR"] = "ON";
        } else {
            $(".HVAC_VALVE01_SCHED" + r + "_SR").css('background', 'black');
            items["HVAC_VALVE01_SCHED" + r + "_SR"] = "OFF";
        }
    });

    /* */

    var request = $.ajax
    ({
        type       : "GET",
        url        : "http://localhost:8080/rest/items/HVAC_VALVE01_SCHED" + r + "_CE/state"
    });

    request.done( function(data) 
    { 

        if(data == "ON") {
            $(".HVAC_VALVE01_SCHED" + r + "_CE").css('background', 'blue');
            items["HVAC_VALVE01_SCHED" + r + "_CE"] = "ON";
        } else {
            $(".HVAC_VALVE01_SCHED" + r + "_CE").css('background', 'black');
            items["HVAC_VALVE01_SCHED" + r + "_CE"] = "OFF";
        }
    });

    /* */

    var request = $.ajax
    ({
        type       : "GET",
        url        : "http://localhost:8080/rest/items/HVAC_VALVE01_SCHED" + r + "_PE/state"
    });

    request.done( function(data) 
    { 

        if(data == "ON") {
            $(".HVAC_VALVE01_SCHED" + r + "_PE").css('background', 'blue');
            items["HVAC_VALVE01_SCHED" + r + "_PE"] = "ON";
        } else {
            $(".HVAC_VALVE01_SCHED" + r + "_PE").css('background', 'black');
            items["HVAC_VALVE01_SCHED" + r + "_PE"] = "OFF";
        }
    });

    /* */

    var request = $.ajax
    ({
        type       : "GET",
        url        : "http://localhost:8080/rest/items/HVAC_VALVE01_SCHED" + r + "_SO/state"
    });

    request.done( function(data) 
    { 

        if(data == "ON") {
            $(".HVAC_VALVE01_SCHED" + r + "_SO").css('background', 'blue');
            items["HVAC_VALVE01_SCHED" + r + "_SO"] = "ON";
        } else {
            $(".HVAC_VALVE01_SCHED" + r + "_SO").css('background', 'black');
            items["HVAC_VALVE01_SCHED" + r + "_SO"] = "OFF";
        }
    });

    /* */

    var request = $.ajax
    ({
        type       : "GET",
        url        : "http://localhost:8080/rest/items/HVAC_VALVE01_SCHED" + r + "_NE/state"
    });

    request.done( function(data) 
    { 

        if(data == "ON") {
            $(".HVAC_VALVE01_SCHED" + r + "_NE").css('background', 'blue');
            items["HVAC_VALVE01_SCHED" + r + "_NE"] = "ON";
        } else {
            $(".HVAC_VALVE01_SCHED" + r + "_NE").css('background', 'black');
            items["HVAC_VALVE01_SCHED" + r + "_NE"] = "OFF";
        }
    });
}

});

我真的不知道该怎么做，所以我会很感激任何帮助。

致以最诚挚的问候，

【问题讨论】：

欢迎来到 Stack Overflow！您的问题的全部内容必须在您的问题中in，而不仅仅是链接。链接腐烂，使问题及其答案对未来的人们毫无用处，人们不应该离开现场来帮助你。将minimal reproducible example 放入问题中，最好使用 Stack Snippets（<> 工具栏按钮）使其可运行（here's how to do one）。更多：How do I ask a good question?
我还建议您研究 DRY 原则，因为所有这些请求都可以使用循环进行
感谢您编辑问题中的代码。您的问题是因为您在每个先前的请求返回任何数据之前覆盖了 request 变量 - 请记住请求是异步的

标签： javascript jquery ajax loops

【解决方案1】：

这里有几个问题。主要问题是每次新调用都会覆盖request 的值。由于请求本身是异步的，因此对前一个 request 的引用会丢失。其次，您试图将键/值对存储在数组中，这在 JS 中不起作用。我建议改为存储一个对象数组。

还请注意，您可以通过为请求 URL 的每个后缀使用另一个循环来使逻辑更加简洁，如下所示：

$(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);
      }
    },
    {
      // ...
    }
  ];

  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://localhost:8080/rest/items/${key}/state`
      }).done(function(data) {
        type.handler(data, $('.' + key));
        result[key] = data;
      });
    });
    items.push(result);
  }
});

请注意，在所有 AJAX 请求完成之前，使用 items 数组是不安全的。为了实现这一点，您可以将 $.ajax 调用返回的延迟对象存储在它们的 on 数组中，然后将 apply() 存储到 $.when。有关更多信息，请参阅this question。

【讨论】：

谢谢。这应该对我有用，但我有一个后续问题。如果后缀为“ONOFF”，则应将其输出发送到复选框，但如果为“URA”或“MINUTA”，则需要将其发送到输入框。我该怎么做？
啊，是的。在这种情况下，我会将 suffixes 更改为包含后缀为字符串的数组对象，以及在 AJAX 请求完成时执行逻辑的处理函数。
我已经更新了答案给你一个粗略的例子。
非常感谢您的所有帮助，我还有最后一个问题。后缀是 PO、TO、SR 的地方需要在 CSS 中改变颜色。如果它打开则蓝色，如果它关闭则黑色。我尝试了一些 if 语句，但没有任何效果。
您可以在 handler 函数中执行此操作。我建议使用 toggleClass() 并将样式放在 CSS 中。

【解决方案2】：

这个评论很好地总结了原因：

'感谢您编辑问题中的代码。您的问题是因为您在每个先前的请求返回任何数据之前覆盖了请求变量 - 请记住请求是异步的' - @Rory McCrossan

尝试以不同的方式命名变量，将它们隔离在自己的范围内，或者在构造后直接使用请求对象。

不同的名字：

var request1 = $.ajax({ ... });
request1.done(data => { ... });

var request2 = $.ajax({ ... });
request2.done(data => { ... });

// Etc.

范围隔离：

(function (ajax, data) {
    var request = $.ajax(ajax);
    request.done(data);
})(
    { .. /* ajax object */ ..},
    data => { .. /* data function */ ..},
)
(function (ajax, data) {
    var request = $.ajax(ajax);
    request.done(data);
})(
    { .. /* ajax object */ ..},
    data => { .. /* data function */ ..},
)

// Etc.

直接请求对象：

$.ajax({ ... })
.done(data => { ... });

$.ajax({ ... })
.done(data => { ... });

// Etc.

【讨论】：