Question

我只是挑战FreeCodeCamp TwitchTV API挑战自己。请瞥一眼这段代码：

function forTwitchList() {
  var twitchers = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
  for (var i = 0; i < twitchers.length; i++) {
    var ourRequest = new XMLHttpRequest();
    ourRequest.open('GET', 'https://api.twitch.tv/kraken/streams/' + twitchers[i] + '?client_id=myproperclientIDhere');
    ourRequest.onload = function() {
      var ourData = JSON.parse(ourRequest.responseText);
      console.log(ourData);
    };
    ourRequest.send();
  }
}


forTwitchList();

首先，我想检查是否可以用我的XMLHttpRequest全部注销console.log（试图为每个XMLHttpRequest使用for循环）。我已经发现它只是不起作用 - 我通过每个forTwitchList()函数调用得到不同的结果，例如对于上次调用我得到以下消息：

“未捕获的SyntaxError：JSON输入的意外结束在JSON.parse（）在XMLHttpRequest.ourRequest.onload“

它适用于3个twitchers数组元素，对于另外5个我实际上得到了被调用的对象，但这些只引用了twitchers数组的最后一个元素noob2ninjas。我的意思是，我有5个被调用的对象，但是所有这些都是noob2ninjas的名称，而它应该从twitchers数组中调用名称。

但重点是我每次回忆这个函数时都会有不同的结果（例如2个Uncaught Syntax错误和6个结果，都是指Array的最后一个元素）。

但是，我已经发现当我将JSON.parse(**ourRequest**.responseText)更改为JSONparse(**this**.responseText) [第7行代码]时，它可以正常运行。我只是不知道为什么。

编辑： @epascarello是的，这是确切的代码。 @Jaromanda X为什么这样工作？它不应该首先执行命令，一旦它发生通过剩余的代码（我的意思是循环的另一个元素）？为什么将for循环的主体移动到一个单独的函数应该有效？

正如我之前所说，我终于找到了如何使我的功能正常工作（但仍然不知道为什么 - 见上文）。现在我的代码看起来像这样：

function forTwitchList() {
var twitchers = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
for (var i=0; i<twitchers.length; i++) {
    var ourRequest = new XMLHttpRequest();    
    ourRequest.open('GET', 'https://api.twitch.tv/kraken/streams/' + twitchers[i] + '?client_id=myclientidcode');
    ourRequest.onload = function() {
        var ourData = JSON.parse(this.responseText);
        if (ourData.stream === null) {
            twitchList.innerHTML += '<div class="twitchentries">' + '<a target="_blank" href="https://www.twitch.tv/' + twitchers[i] + '">' + ourData._links.channel + '</a>' + '<p>This twitch is offline</p>' + '</div>' + '<br>';            
        } else {
            twitchList.innerHTML += '<div class="twitchentries">' + '<a target="_blank" href="' + ourData.stream.channel.url + '">' + ourData.stream.channel.url + '</a>' + '<p>This twitch is online</p><p>Streamed game:' + ourData.stream.game + '</p>' + '</div>' + '<br>';
        }        
        console.log(ourData);
    };
    ourRequest.send();
}   
}
forTwitchList();

所以我尝试添加div（在我的for循环中），其中包含有关频道链接和显示游戏的信息。它适用于在线渠道（“其他”标记为for循环） - 离线游戏没有“ourData.stream.channel.url”属性，所以我想出了连接直接经典链接“{{3} }“有twitchers [i]值，因为它包含频道名称。

我的问题是for循环无法弄清楚[i]值是什么 - 正如它所说，它是未定义的。我无法弄清楚为什么 - 我已经在我的forTwitchList（）函数中定义了twitchers数组。当我输入确切的数字而不是[i]标记时，我得到了正确的结果，但结果与每个数组元素相同，所以我为每个元素都有相同的通道链接，这是不正确的。

JS for Loop for XMLHttpRequest无法继续执行所有请求

0 个答案: