如何从Axios中的http错误中获取状态代码？

Question

这可能看起来很愚蠢,但是当Axios中的请求失败时,我正试图获取错误数据.

axios.get('foo.com')
    .then((response) => {})
    .catch((error) => {
        console.log(error) //Logs a string: Error: Request failed with status code 404
    })

而不是字符串,是否可以获得具有状态代码和内容的对象？例如:

Object = {status: 404, reason: 'Not found', body: '404 Not found'}

Answer 1

你看到的是对象toString方法返回的字符串error.(error不是字符串.)

如果已从服务器收到响应,则该error对象将包含该response属性:

axios.get('/foo')
  .catch(function (error) {
    if (error.response) {
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    }
  });

Answer 2

使用 TypeScript，很容易找到合适的类型。

import { AxiosResponse, AxiosError } from 'axios'

axios.get('foo.com')
  .then(response: AxiosResponse => {
    // Handle response
  })
  .catch((reason: AxiosError) => {
    if (reason.response!.status === 400) {
      // Handle 400
    } else {
      // Handle else
    }
    console.log(reason.message)
  })

Answer 3

正如@Nick所说,当你使用console.log一个JavaScript Error对象时,你看到的结果取决于它的确切实现console.log,这种结果会有所不同,并且(imo)会使检查错误变得异常烦人.

如果您希望看到完整Error对象及其绕过该toString()方法的所有信息,您可以使用JSON.stringify:

axios.get('/foo')
  .catch(function (error) {
    console.log(JSON.stringify(error))
  });

Answer 4

validateStatus请求配置中有一个新选项。如果状态 < 100 或状态 > 300（默认行为），您可以使用它来指定不抛出异常。例子：

const {status} = axios.get('foo.com', {validateStatus: () => true})

Answer 5

为了获取服务器返回的http状态码，可以validateStatus: status => true在axios选项中添加：

axios({
    method: 'POST',
    url: 'http://localhost:3001/users/login',
    data: { username, password },
    validateStatus: () => true
}).then(res => {
    console.log(res.status);
});

这样，每个 http 响应都会解析从 axios 返回的 Promise。

https://github.com/axios/axios#handling-errors

Answer 6

整个错误只能使用 error.response 来显示，如下所示：

axios.get('url').catch((error) => {
      if (error.response) {
        console.log(error.response);
      }
    });

Answer 7

您可以使用扩展运算符 ( ...) 将其强制转换为一个新对象，如下所示：

axios.get('foo.com')
    .then((response) => {})
    .catch((error) => {
        console.log({...error}) 
})

请注意：这不会是 Error 的实例。

Answer 8

我正在使用此拦截器来获取错误响应。

const HttpClient = axios.create({
  baseURL: env.baseUrl,
});

HttpClient.interceptors.response.use((response) => {
  return response;
}, (error) => {
  return Promise.resolve({ error });
});

Answer 9

const handleSubmit = (e) => {
e.preventDefault();
// console.log(name);
setLoading(true);
createCategory({ name }, user.token)
  .then((res) => {
   // console.log("res",res);
    setLoading(false);
    setName("");
    toast.success(`"${res.data.name}" is created`);
    loadCategories();
  })
  .catch((err) => {
    console.log(err);
    setLoading(false);
    if (err.response.status === 400) toast.error(err.response.data);//explained in GD
  });

};

看控制台日志就明白了