API 響應在只請求一個時給出兩個響應

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);
  }}}

這是一個顯示兩個響應的控制台圖像：

感謝您對此的任何想法

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();
}