javascript - 另一个内部的 Ajax 请求

Question

我正在为我的战场 1 战队制作一个网站，在这个网站上我想展示这个战队中的每个玩家以及他们的一些游戏内统计数据。 玩家列表存储在数据库中，我将从这个 api 中获取统计数据 .这意味着我将首先使用 ajax 从数据库中获取玩家列表，然后循环遍历它们以通过该循环中的第二个 ajax 调用获取玩家统计信息。

在我运行我的代码之前，这一切听起来都很有趣和游戏，有时并不是所有的请求都会成功，每当我试图显示一个显示名称时，它总是会显示上次调用的那个。

这是我的代码:

$(document).ready(function() {
  $.ajax({
    url: 'playerlist.php',
    method: 'POST',
    data: {
      playercheck: 1,
    },
    success: function(response) {
      var len = response.length;
      for (var i = 0; i < len; i++) {
        var psnid = response[i].psnid;

        // second ajax 

        var request = new XMLHttpRequest();

        request.open('GET', 'https://battlefieldtracker.com/bf1/api/Stats/BasicStats?platform=2&displayName=' + psnid);

        request.setRequestHeader('TRN-Api-Key', '125a7cbe-1bbe-45d4-9f70-3aa838fc7535');

        request.onreadystatechange = function() {
          if (this.readyState === 4 && this.status == 200) {
            console.log('Status:', this.status);
            console.log('Headers:', this.getAllResponseHeaders());
            console.log('Body:', this.responseText);
            var result = JSON.parse(request.responseText);

            console.log(result);
            $("#userTable").append(result['profile']['displayName']);
          }
        };

        request.send();

        // end second

      }
    },
    dataType: "json"
  });
});

如果你们能告诉我造成这种情况的原因并帮助我找到解决方案，那就太好了。 提前致谢!

Answer 1

这很可能是一个可变范围问题。在 JavaScript 中，带有 var 的变量声明被“提升”到包含函数的顶部。此外，变量的范围是函数，而不是 for 循环。

因此，虽然看起来每个 for 循环迭代都应该创建一个完全独立的 request 实例，但实际情况并非如此。到 onreadystatechange 事件触发时，您的 request 值可能已更改。

有两种方法可以解决这个问题。首先，使用es6 JS新的let或const变量声明，作用域不同。因此，如果您不需要它在旧版浏览器中工作，您只需将 var request 更改为 let request，它应该可以工作。

如果这不可能，您需要想出一种方法来限制您的 request 变量的“范围”，例如将您的请求代码放在一个函数中，然后从 for 循环内部调用函数。