API函数被调用两次导致重复

Question

我正在尝试向远程服务器发送获取 API 请求。响应非常好，正如我想要的那样。我正在尝试将响应存储在一个表中。但这里的问题是该processRequest()函数被调用了两次，这会产生重复的结果。我正在使用的警报也显示了两次。

document.getElementById("ndviHsearch").onclick = function getndviHdata(){

   var ndvihconvdataTime=[];

   var ndvihStd=[];

   var ndvihp25=[];

   var ndvihmin=[];

   var ndvihmax=[];

   var ndvihmedian=[];

   var ndvihmean=[];

   var ndvihp75=[];

   var ndviHfidValue = document.getElementById("ndviHfid").value;

   var ndviHstartDateValue = document.getElementById("ndviHstartDate").value;

   var ndviHendDateValue = document.getElementById("ndviHendDate").value;

   table = document.getElementById("ndviHtable");

   const xhr = new XMLHttpRequest();

   ndviHstartDateValue = new Date(ndviHstartDateValue).getTime() / 1000;

   ndviHendDateValue = new Date(ndviHendDateValue).getTime() / 1000;

   xhr.open("GET","https://api.agromonitoring.com/agro/1.0/ndvi/history?polyid="+ndviHfidValue+"&start="+ndviHstartDateValue+"&end="+ndviHendDateValue+"&appid=APIKEY");

   xhr.setRequestHeader("Content-Type","application/json");

   xhr.send();

   xhr.onreadystatechange = processRequest;

   function processRequest(e) {

     if (xhr.status==200){

       response = JSON.parse(xhr.responseText);

       alert (response.length);

       for (var i=0; i<response.length; i++){

         var dt = response[i].dt;

         // Unixtimestamp

         var unixtimestamp = dt;

         // Months array

         var months_arr = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];

         // Convert timestamp to milliseconds

         var date = new Date(unixtimestamp*1000);

   

         var year = date.getFullYear();

         var month = months_arr[date.getMonth()];

         var day = date.getDate();

         var hours = date.getHours();

         var minutes = "0" + date.getMinutes();

         var seconds = "0" + date.getSeconds();

   

      }

    }

    

Answer 1

您还需要检查 readyState 值(xhr.readyState == 4 && xhr.status == 200)函数&nbsp;xhr.onreadystatechange = processRequest;将在每次 xhr 状态更改时执行，您需要检查是否readyState == 4还有status &nbsp;== 200，然后执行您的操作。