在 Ajax 次通话中收听 500 条回复？

Question

我正在监听网页上的 xhr 事件，以捕获任何可能的请求失败。为了听到所有这些，我正在应用这个伪猴子补丁：

var reqOpen = XMLHttpRequest.prototype.open;

XMLHttpRequest.prototype.open = function() {
this.addEventListener('load', function() {

console.log(this.readyState); // this is always 4, but I'm trying to 
listen for when it's not successful
console.log(this.responseText); //the respoinse

});

reqOpen.apply(this, arguments);

它在成功响应时起作用，但除此之外它不会捕获任何东西。

有什么方法可以尝试捕获不成功的请求（特别是 return 500 响应的请求？

谢谢

Answer 1

load 事件仅在请求成功完成时触发。 onreadystatechange 事件将在请求过程中的每一步触发。

在该事件处理程序中，检查 4 的 readyState，这意味着请求已完成，无论是否成功。然后检测status属性是否为500。此属性将是您要查找的 HTTP 响应代码。

不会有负载，因为服务器无法发回响应，使 responseText 无用。而是检查 statusText 属性以获取与 HTTP 状态对应的消息。

var reqOpen = XMLHttpRequest.prototype.open;

XMLHttpRequest.prototype.open = function() {
  this.addEventListener('readystatechange', function() {
    if (this.readyState === 4 && this.status === 500) {
      console.log(this.statusText);
    }
  });

  reqOpen.apply(this, arguments);
}

Answer 2

您可以在 load 活动或 loadend 活动中访问 status。

本演示中使用的端点returns 500

var reqOpen = XMLHttpRequest.prototype.open;

XMLHttpRequest.prototype.open = function() {
  this.addEventListener('loadend', function() {
     if(this.status > 200){
        console.log('Loadend Status:', this.status)
     }      
  });
  this.addEventListener('load', function() {
    console.log('Load Status:', this.status)
  });
  reqOpen.apply(this, arguments);
}

// example making request with jQuery ajax that uses XMLHTtpRequest
$.get('https://httpstat.us/500')

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

在 Ajax 次通话中收听 500 条回复？

Listen for 500 responses on Ajax calls?

javascript

ajax

xmlhttprequest