setInterval 내의 비동기 xhr 요청이 작동하지 않습니다. 자바 스크립트

Question

이벤트를 백엔드로 보내도록 추적 라이브러리를 구축 중입니다. 이벤트는 5 초마다 (구성 가능) 만들어 져서 추적 대기열로 전송되어야하며 추적 대기열은 백엔드로 보내 져야하며 5 초마다 비워야합니다 (구성 가능). 예상되는 동작은 이벤트가 5 초마다 백엔드로 전송되어야한다는 것입니다.

이벤트가 console.logging 일 때 모든 것이 예상대로 작동했지만 xhr 요청을 구현할 때 간격 이벤트는 매 9 초마다 생성되었습니다. 따라서 이벤트는 백엔드로 보내지는데, 'post'함수가 두 번 실행될 때마다 한 번만 발생합니다.

sendData: function(){ 
    var toSend = [].concat(Tracking.__tracking_queue); 
    if(toSend.length !== 0){ 
     var sendData = this.__stringifyAndSetHeaders(toSend); 
     Tracking.postData(sendData); 
    } 
}, 

postData: function(sendData){ 
    var xhr = new XMLHttpRequest(); 
    xhr.onload = function() { 
     console.log(xhr.responseText); 
     Tracking.__tracking_queue = []; 
    }; 
    xhr.open("POST", sendData.url, true); 
    Object.keys(sendData.headers).forEach(function(key){ 
     xhr.setRequestHeader([key], sendData.headers[key]); 
    }); 
    xhr.send(sendData.body); 
} 

백엔드는 정확한 시간에 데이터를 수신하지 못합니다. sendData가 setInterval 루프 내에서 호출되고 있습니다.

setInterval(function(){ 
     self.sendData() 
    }, 5000); 

나는 같은 설정이 axios를 사용하여 다른 파일에 전에 완벽하게 작동했다,하지만 난이 사용 사례에 Axios의를 사용할 수 없습니다.

Answer 1

잘못된 위치에서 추적 데이터를 재설정하고 있습니다. 요청을 한 후 데이터를 읽습니다. 요청이 완료되면 데이터를 삭제합니다. 요청과 완료 사이에 대기열에 데이터가 들어갈 수있는 시간이 있습니다.

sendData: function(){ 
    var toSend = [].concat(Tracking.__tracking_queue); 
    if(toSend.length !== 0){ 
     var sendData = this.__stringifyAndSetHeaders(toSend); 
     Tracking.__tracking_queue = []; //clear it here 
     Tracking.postData(sendData); 
    } 
}, 

postData: function(sendData){ 
    var xhr = new XMLHttpRequest(); 
    xhr.onload = function() { 
     console.log(xhr.responseText); 
     //Tracking.__tracking_queue = []; //don't clear it here 
    }; 
    xhr.open("POST", sendData.url, true); 
    Object.keys(sendData.headers).forEach(function(key){ 
     xhr.setRequestHeader([key], sendData.headers[key]); 
    }); 
    xhr.send(sendData.body); 
}