无法使XMLHttpRequest进入3个单独的API URL

Question

开始之前，这里是API。超级简单：https://www.cryptonator.com/api

注意，我以前使用过api，但是我使用了await异步函数，但是由于某种原因，我无法使它正常工作。...但是我找到了使用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个不同的APis发出3个请求，但是它不起作用。如果我注释掉除了这些功能之一以外的所有功能，它将正常工作。当我尝试一次使用所有3个时，问题就来了。如果我仅使用比特币和莱特币，它将可以正常工作，但是一旦我尝试使用第三个函数（以太坊价格），它将再次中断。

Answer 1

parseJson功能定义了3次。这意味着每次您编写函数时，它将覆盖先前的定义。因此，在您的情况下，仅最后一个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);
}

最后一种技术适用于其余代码。注意重复自己。当您只需要编写一次内容时，您将编写出更简洁的代码和better代码。

Answer 2

如果我对您的理解很好，则可以为所有密码创建一个方法，并避免重复相同的代码。如果运行下面的示例，您将能够看到所有加密货币，并且很容易添加新的加密货币：

Answer 3

您应该可以使用Promise为此编写一个异步包装函数。这将使您可以将Promise / async与await一起使用。