javascript - 无法将 XMLHttpRequest 发送到 3 个单独的 API 网址

Question

在我开始之前，这是 API。 super 简单:https://www.cryptonator.com/api

请注意，我以前使用过 api，但我使用了 await async 函数，但由于某种原因我无法让它工作....但我找到了一个使用 XML http 请求执行此操作的教程，所以我决定继续使用 XML 来完成它，因为我能够制作一个简单的比特币自动收报机。

我正在构建一个简单的小部件，以使用 cryptonator API 显示比特币、莱特币和以太坊的价格。就像我上面说的，我用第一个函数制作了一个比特币自动收报机(见下面的代码)，而且效果很好。但是，我在尝试获取 3 种不同的货币时遇到了问题。

这是我正在尝试做的事情。

var url = "https://api.cryptonator.com/api/ticker/btc-usd";

xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var json = JSON.parse(this.responseText);
    parseJson(json);
  }
};

xmlhttp.open("GET", url, true);
xmlhttp.send();

function parseJson(json) {

  var usdValue = json["ticker"]["price"];
  document.getElementById("data").innerHTML = usdValue;

  var usdValue = usdValue.replace(/[^\d.\-]/g, "");
  var usd = parseFloat(usdValue);
  document.getElementById("data").innerHTML = "$ " + usd.toFixed(2);
}



// 
// 

var xmlhttp2 = new XMLHttpRequest();
var url2 = "https://api.cryptonator.com/api/ticker/ltc-usd";

xmlhttp2.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var json = JSON.parse(this.responseText);
      parseJson(json);
    }
  };

  xmlhttp2.open("GET", url2, true);
  xmlhttp2.send();

  function parseJson(json) {

    var LTCusdValue = json["ticker"]["price"];
    // document.getElementById("data2").innerHTML = LTCusdValue;

    var LTCusdValue = LTCusdValue.replace(/[^\d.\-]/g, "");
    var LTCusd = parseFloat(LTCusdValue);
    document.getElementById("data2").innerHTML = "$ " + LTCusd.toFixed(2);
  }


//   
// 
// 

var xmlhttp3 = new XMLHttpRequest();
var url3 = "https://api.cryptonator.com/api/ticker/eth-usd";

xmlhttp3.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var json = JSON.parse(this.responseText);
      parseJson(json);
    }
  };

  xmlhttp3.open("GET", url3, true);
  xmlhttp3.send();

  function parseJson(json) {

    var ETHusdValue = json["ticker"]["price"];
    // document.getElementById("data3").innerHTML = ETHusdValue;

    var ETHusdValue = ETHusdValue.replace(/[^\d.\-]/g, "");
    var ETHusd = parseFloat(ETHusdValue);
    document.getElementById("data3").innerHTML = "$ " + ETHusd.toFixed(2);
  }

如您所见，我尝试向 3 个不同的 API 发出 3 个请求，但没有成功。如果我注释掉其中一个函数以外的所有函数，它就可以正常工作。当我尝试同时使用所有 3 个时，我的问题就来了。如果我只使用比特币和莱特币，它实际上可以工作，但一旦我尝试使用第三个功能(获取以太坊价格)就会再次崩溃。

Answer 1

parseJson 函数被定义了三次。这意味着每次您编写函数时，它都会覆盖以前的定义。因此，在您的情况下，只有最后一个 parseJson 函数将用于所有三个 请求。你可以做几件事。

写三个不同的变体。 (不好的做法)

虽然这将是不太有利的选项。它将要求您将重复的代码复制多次。这可以更有效地完成。

function parseJson1(json) {
  ...
}

function parseJson2(json) {
  ...
}

function parseJson3(json) {
  ...
}

向函数添加一个参数。 (良好实践)

为 parseJson 函数提供第二个参数，用于选择要输出值的元素。这应该是您要选择的元素的 id。
这是更好的解决方案，因为它只需要您编写一次函数并多次调用它以解决变化。

function parseJson(json, id) {
  var output = document.getElementById(id); // Select the element based on the id.
  if (output === null) { // If element is not found, stop the function.
    return;
  }
  var price = json["ticker"]["price"];
  var usdValue = price.replace(/[^\d.\-]/g, "");
  var usd = parseFloat(usdValue);
  output.innerHTML = "$ " + usd.toFixed(2);
}

最后一种技术适用于您的其余代码。注意重复自己。当您只需编写一次代码时，您将编写出更干净、更好的代码。