如何从Axios中的HTTP错误中获取状态代码?

这可能看起来很愚蠢,但我试图在Axios中获得请求失败时的错误数据。

axios
.get('foo.example')
.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'}
601412 次浏览

这是一个已知的错误,请尝试使用"axios": "0.13.1"

https://github.com/mzabriskie/axios/issues/378

我有同样的问题,所以我最终使用"axios": "0.12.0"。这对我来说很有效。

你看到的是error对象的toString方法返回的字符串。(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);
}
});

我使用这个拦截器来获得错误响应。

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


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

正如@Nick所说,当你console.log一个JavaScript Error对象时,你看到的结果取决于console.log的确切实现,这是不同的(imo),使得检查错误非常烦人。

如果你想绕过toString()方法查看完整的Error对象及其携带的所有信息,你可以使用JSON.stringify:

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

使用TypeScript,用正确的类型很容易找到你想要的东西。

这使一切都变得更简单,因为您可以使用自动完成获得类型的所有属性,因此您可以知道响应和错误的正确结构。

import { AxiosResponse, AxiosError } from 'axios'


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

此外,你可以给这两种类型都传递一个参数来告诉你在response.data中期望的是什么,如下所示:

import { AxiosResponse, AxiosError } from 'axios'
axios.get('foo.example')
.then((response: AxiosResponse<{user:{name:string}}>) => {
// Handle response
})
.catch((reason: AxiosError<{additionalInfo:string}>) => {
if (reason.response!.status === 400) {
// Handle 400
} else {
// Handle else
}
console.log(reason.message)
})

你可以使用展开操作符(...)强制它成为一个新对象,如下所示:

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

注意:这将不是Error的实例。

你可以把错误放入一个对象并记录该对象的日志,如下所示:

axios.get('foo.example')
.then((response) => {})
.catch((error) => {
console.log({error}) // this will log an empty object with an error property
});

在请求配置中有一个名为validateStatus的新选项。你可以使用它来指定不抛出异常,如果status <100或地位>300(默认行为)。例子:

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

为了获得从服务器返回的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返回的承诺。

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

这是我的准则:为我工作

 var jsonData = request.body;
var jsonParsed = JSON.parse(JSON.stringify(jsonData));


// message_body = {
//   "phone": "5511995001920",
//   "body": "WhatsApp API on chat-api.com works good"
// }


axios.post(whatsapp_url, jsonParsed,validateStatus = true)
.then((res) => {
// console.log(`statusCode: ${res.statusCode}`)


console.log(res.data)
console.log(res.status);


// var jsonData = res.body;
// var jsonParsed = JSON.parse(JSON.stringify(jsonData));


response.json("ok")
})
.catch((error) => {
console.error(error)
response.json("error")
})
Axios. get('foo.example')
.then((response) => {})
.catch((error) => {
if(error. response){
console.log(error. response. data)
console.log(error. response. status);


}
})

只获取错误却不返回对象,这确实很奇怪。而返回error.response可以让你访问你需要的大部分反馈。

最后我用了这个:

axios.get(...).catch( error => { return Promise.reject(error.response.data.error); });

它严格地提供了我需要的东西:状态码(404)和错误的文本消息。

整个错误只能用error来显示。这样的回答:

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

与Axios

    post('/stores', body).then((res) => {


notifyInfo("Store Created Successfully")
GetStore()
}).catch(function (error) {


if (error.status === 409) {
notifyError("Duplicate Location ID, Please Add another one")
} else {
notifyError(error.data.detail)
}


})
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
});

};

看看控制台日志,你就明白了

enter image description here