Javascript 无法将XMLHttpRequest设置为3个单独的API URL_Javascript_Api_Xmlhttprequest

Javascript 无法将XMLHttpRequest设置为3个单独的API URL

javascript api

Javascript 无法将XMLHttpRequest设置为3个单独的API URL,javascript,api,xmlhttprequest,Javascript,Api,Xmlhttprequest,在开始之前，这里是API。超级简单：需要注意的是，我以前使用过api，但我使用了wait async函数，但由于某些原因，我无法使用该函数……但我找到了一个使用XML http请求实现此功能的教程，因此我决定继续使用XML实现此功能，因为我能够制作一个简单的比特币代码我正在构建一个简单的小部件，使用cryptonator API显示比特币、莱特币和以太坊的价格。正如我上面所说的，我制作了一个带有第一个功能的比特币自动售票机（见下面的代码），效果非常好。然而，我在尝试获得3种不同的货币时遇到了

在开始之前，这里是API。超级简单：

需要注意的是，我以前使用过api，但我使用了wait 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个时，我的问题就出现了。如果我只使用比特币和莱特币，它实际上会工作，但在我尝试使用第三个函数（以获取以太坊价格）时会再次中断。

您应该能够使用..为其编写异步包装函数。。这将允许您将

async

wait

与

XHR

一起使用

要使使用

XHR

更容易，可以使用内置。。据介绍，大多数浏览器都支持

fetch

。。总之，我更喜欢使用

fetch

而不是

XHR

等等。。但由于您特别询问了

XHR

，我就是这样回答的

如果您不想等待每个响应，可以执行以下操作：

//用于“get”的基本XHR包装函数
函数getXHR（url）{
返回新承诺（功能（解决、拒绝）{
const xhr=new XMLHttpRequest（）；
xhr.open（“get”，url，true）；
xhr.onreadystatechange=函数（）{
if（this.readyState==4&&this.status==200）{
此状态==200
？解决（此.responseText）
：拒绝（此状态）；
}
};
xhr.send（）；
});
}
const-etElement=document.getElementById（“eth”）；
常量bcElement=document.getElementById（“bc”）；
const lcElement=document.getElementById（“lc”）；
//乙醚
getXHR（“https://api.cryptonator.com/api/ticker/eth-usd")
。然后（eth=>{
//可以像这样转换为JSON：
//const ethJson=JSON.parse（eth）；
etElement.innerHTML=eth；
})
//比特币
getXHR（“https://api.cryptonator.com/api/ticker/btc-usd")
.然后（bc=>{
//可以像这样转换为JSON：
//const bcJson=JSON.parse（bc）；
bcElement.innerHTML=bc；
})
//莱特币
getXHR（“https://api.cryptonator.com/api/ticker/ltc-usd")
。然后（lc=>{
//可以像这样转换为JSON：
//const lcJson=JSON.parse（lc）；
lcElement.innerHTML=lc；
})

eth:
卑诗省：
莱特币：