Question

我在 JS 中发出了一个有效的 API 请求，但是当我只期待一个响应时它一直给出两个响应。代码如下：

CallCoinGecko();

function CallCoinGecko() {
  var cgrequest = new XMLHttpRequest();
  var url1 = 'https://api.coingecko.com/api/v3/simple/price?ids=';
  var id = 'ethereum';
  var url2 = '&vs_currencies=USD&include_market_cap=true&include_24hr_vol=true&include_24hr_change=true';
  cgrequest.open("GET", url1 + id + url2, true);
  cgrequest.send();
  cgrequest.onreadystatechange = function () {
    if (cgrequest.status == 200) {
    var cgresponse = cgrequest.responseText;
    var cgobj = JSON.parse(cgresponse);
    console.log(cgobj);
    var cgprice = (cgobj[id]['usd']);
    console.log(cgprice);
  }}}

这是显示两个响应的控制台图像： image

感谢您对此的任何想法

Answer 1

尝试在请求后验证 readyState 的值。示例：

if (cgrequest.status === 200 && cgrequest.readyState === 4)

问题是，如前所述，readyState 可以有多个值 - 因此每次更改时，都会触发打印响应文本的代码。我确定如果您查看网络选项卡，API 请求不会被执行两次，只有您的响应文本被打印两次。检查是否为 4 确认请求已完成 - 并且应该只执行一次。

我预感 API 不会被调用两次是因为每个 console.log() 上的数据完全相同。

祝你好运:)

Answer 2

您还应该比较 if 语句中的 readyState 值。

function CallCoinGecko() {
  var cgrequest = new XMLHttpRequest();
  var url1 = 'https://api.coingecko.com/api/v3/simple/price?ids=';
  var id = 'ethereum';
  var url2 = '&vs_currencies=USD&include_market_cap=true&include_24hr_vol=true&include_24hr_change=true';
  cgrequest.open("GET", url1 + id + url2, true);
  cgrequest.onreadystatechange = function(res){
    if (cgrequest.status === 200 && cgrequest.readyState === XMLHttpRequest.DONE) {
        var cgresponse = cgrequest.responseText;
        var cgobj = JSON.parse(cgresponse);
        console.log(cgrequest.status, cgobj);
        var cgprice = (cgobj[id]['usd']);
        console.log(cgrequest.status, cgprice);
      }
    };
    cgrequest.send();
}

API 响应在仅请求一个响应时给出两个响应

2 个答案: