前端可以处理500错误信息吗?

1,749 阅读1分钟

这里的500错误指的是后端返回的值为500http状态码的接口

回到题干,前端可以处理此类信息吗?当然可以。

我们知道异常的状态码(类似404,500等)会被浏览器自动展示在控制台里,那么这种行为,程序员可以控制吗?答案是不可以,因为这是浏览器的自带行为。

我们先来谈谈异常响应

异常响应

一般异常的响应是4.xx5.xx,其实他们都是一次后端返回的响应,我们都是可以获取这些响应体的,比如一个一次500状态码的响应:

//服务端代码
app.get("/test", (req, res, next) => {
  res.writeHead(500,'500 error message from serverside!').end("Hello,world!")
});
//客户端
var xhr = new XMLHttpRequest();
xhr.onload = () => {
    console.log('get the response-->',xhr)
}
xhr.onerror = () =>{
    console.log('didn\'t get response-->',xhr)
}
xhr.open('get','http://localhost:8080/test');

控制台截图:

image.png

根据上图可以得知:

  • 500错误的接口请求+响应整个过程是完整的,响应在onload回调里成功获取了
  • 500错误信息被浏览器自动打印了出来,这个是前端无法控制的

如何处理异常响应

很简单了,我们可以根据xhr.status来进行判断处理,然后增加处理就可以了