如何在纯 Javascript 中使用 XMLHttpRequest 记录 500 个服务器错误？答案

【问题标题】：How do I log 500 server errors with XMLHttpRequest in pure Javascript?如何在纯 Javascript 中使用 XMLHttpRequest 记录 500 个服务器错误？
【发布时间】：2018-09-15 02:57:40
【问题描述】：

我通常一直使用 XMLHttpRequest 来执行 Ajax 调用。但是，当服务器出现错误时，我想控制台记录错误，这样我就不必跑到服务器那里查看事件日志。

这是我通常做的：

function LoadPage(){
   	var parameters="this=that";
	var x = new GetXmlHttpObject();
	x.open("POST", "Ajax.aspx?Function=LoadPage")
	x.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	x.ontimeout = function () { location.reload(true); }
	x.send(parameters);
	x.onreadystatechange = function () {
		if (x.readyState == 4 && x.status == 200){
			//Do Stuff with the response
		}
	}

但如果服务器的请求有错误，我会在 x.send(parameters) 行收到错误。我试图将它包装在 try..catch 中，但即使在 try 中保存了命令，也会在控制台中出现错误。

如何使用这种结构来控制台记录来自服务器的 500 错误？

【问题讨论】：

“但是如果服务器的请求有错误，我会在 x.send(parameters) 行得到错误” 是什么让你这么认为？如果是 500 错误，您将在 readystate 回调中得到它。它是异步的，就像您已经检查过的 200 响应一样。
This 可能有用。
好的 - 我明白了。我的 Chrome 控制台在该行将其指示为错误，这是真的，但我可以使用另一个 x.resadyState == 4 && x.status==500.. 来捕获错误。谢谢！

标签： javascript ajax

【解决方案1】：

更新功能

function LoadPage() {
      return new Promise(function(succeed, fail) {
        var req = new XMLHttpRequest();
        req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        req.open("POST", "Ajax.aspx?Function=LoadPage", true);
        req.ontimeout = function () { location.reload(true); }
        req.addEventListener("load", function() {
          if (req.status < 400)
            succeed(req.responseText);
          else if (req.status == 500)
            fail("Error 500: Internal Server Error");
          else
            fail(new Error("Request failed: " + req.statusText));
        });
        req.addEventListener("error", function() {
          fail(new Error("Network error"));
        });
        req.send("this=that");
      });
    }

用法：

LoadPage().then(function(text) {
  console.log("data.txt: " + text);
}, function(error) {
  console.log("Failed to fetch data.txt: " + error);
});

【讨论】：

【解决方案2】：

但是如果服务器的请求有错误，我会在 x.send(parameters) 行得到错误。

那不会发生。在响应到达之前，客户端无法以任何方式对响应做出反应。

我试图将它包装在 try..catch 中

这行不通有两个原因。

它是异步的
不会抛出异常

if (x.readyState == 4 && x.status == 200){

您已经在此处测试200 状态。以同样的方式测试500 状态。

【讨论】：