Play this article
What's more frustrating than seeing Request failed with status code 400
returned from error.message
?
On the surface, it makes sense that console.log(error.message)
should display the error message returned from the backend, but it doesn't. It turns out, the custom message returned from the backend lives in the error response. Specifically, in error.response.data.message
.
const fetchData = async () => {
try {
const { data } = await axios.get("/some-data");
console.log(data);
} catch (error) {
console.log(error.response.data.message);
}
};
Analyzing error.response.data.message
shows that it follows the same way of accessing data in the try
block. The only difference being the error
appended to the response
object.
You can still access the error message with .then
and .catch
.
const fetchData = () => {
axios
.get("/some-data")
.then(({ data }) => {
console.log(data);
})
.catch((error) => {
console.log(error.response.data.message);
});
};
If you want to get facier, you can destructure response directly in the catch sub-block.
.catch(({response}) => {
console.log(response.data.message);
});
Thanks for stopping by. Adios βπΎπ§‘.
Credits
Β