JavaScript AJAX请求循环

时间:2018-02-15 11:01:49

标签: javascript jquery ajax loops

我是makig REST API请求,我希望从中获取一些数据并将其输出到网站上。

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

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

JS代码

result = db.collection.update_many({"list.friends": { $elemMatch: { "Code":"A"}}}, 
     {"$unset": {"list.friends.$.Name": "", "list.friends.$.Contact": ""}})

});

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

最诚挚的问候,

2 个答案:

答案 0 :(得分: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调用返回的延迟对象存储在其数组中,然后将apply()存储到$.when。有关详细信息,请参阅this question

答案 1 :(得分:0)

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

  

'比你编辑问题的代码。您的问题是因为您在每个先前的请求返回任何数据之前覆盖了请求变量 - 请记住请求是异步的 - @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.