axios请求的400状态码catch问题小记

当我们向服务器发送请求，有可能会接收到400 的状态码，其实这时已经成功访问服务器了，可能你发送的post数据在服务器那边校验失败了，如果你的服务器返回的是json格式的话，在前端接收到的也是json格式。
如果你使用axios发送请求的话，当服务端返回400的状态码，如果不catch的话，会在控制台报如下的错误

不catcherror
如果我们catch这个错误，同时打印相关的error信息，这时你会在控制台看到，返回的error并不是一个对象，而是这样的字符串：
控制台打印出来的error
这时候，如果服务器在返回400错误码的同时，也给出了响应信息，我们该怎么取呢？其实这里打印出来的error虽然是一堆错误信息的字符串，但相关的响应信息还是可以从error.response当中拿到
这个在axios官方的文档中也的错误处理部分也是能看到的，所以有的时候还是得仔细阅读官方文档呀 T_T

axios.get('/user/12345')
  .catch(function (error) {
    // 【务必注意】这里的error输出的不是一个对象【error.response才是一个对象】
    if (error.response) {
      // 请求成功发出且服务器也响应了状态码，但状态代码超出了 2xx 的范围
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      // 请求已经成功发起，但没有收到响应
      // `error.request` 在浏览器中是 XMLHttpRequest 的实例，
      // 而在node.js中是 http.ClientRequest 的实例
      console.log(error.request);
    } else {
      // 发送请求时出了点问题
      console.log('Error', error.message);
    }
    console.log(error.config);
  });

这里官方文档也给出了如果需要查看更多error的详情，可以使用toJSON的方式

axios.get('/user/12345')
  .catch(function (error) {
    console.log(error.toJSON());
  });

之前的错误信息在控制台打印如下

error toJSON

从这里我们可以知道，当我们控制台打印 error信息的时候，浏览器自己内部进行了处理，把error里面的一些信息整合过后显示了出来。

最后，如果不想400的时候抛出异常怎么办，可以使用 validateStatus 配置选项定义一个自定义 HTTP 状态码的错误范围。

axios.get('/user/12345', {
  validateStatus: function (status) {
      return status < 500; // 状态码在大于或等于500时才会 reject
  }
})