I'm trying to support a 404 response from api (https://rickandmortyapi.com) with axios.
So when item exists the response looks like this:
{
"data": {
"id": 11,
"name": "Albert Einstein",
// ...
},
"status": 200,
"statusText": "OK",
"headers": {
"content-type": "application/json; charset=utf-8"
},
"config": {
"transformRequest": {},
"transformResponse": {},
// ...
},
"request": {}
}
If not found response is 404 and the data is like:
{
"error": "Character not found"
}
So I want to read this error message and put this into a variable but no effect. I have something like that for testing:
new Vue({
el: "#app",
data: {
existingCharacter: {},
nonExistingCharacter: {}
},
methods: {
apiRequest (id, character) {
console.log('starting Request');
axios('https://rickandmortyapi.com/api/character/'+id, {
validateStatus: function (status) {
return status < 500; // Reject only if the status code is greater than or equal to 500
})
.then((res) => {
console.log('got response');
console.log(res);
this[character] = res;
}
).catch(function (error) {
if (error.response) {
// The request was made and the server responded with a status code
// that falls out of the range of 2xx
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
} else if (error.request) {
// The request was made but no response was received
// `error.request` is an instance of XMLHttpRequest in the browser and an instance of
// http.ClientRequest in node.js
console.log(error.request);
} else {
// Something happened in setting up the request that triggered an Error
console.log('Error', error.message);
}
console.log(error.config);
})
.then(function () {
console.log('request finished');
});
}
}
})<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="columns is-mobile">
<div class="column is-half">
<h2 class="title">existing item: </h2>
<button class="button is-fullwidth"
@click="apiRequest(11, 'existingCharacter')">
get
</button>
<pre>{{existingCharacter}}</pre>
</div>
<div class="column is-half">
<h2 class="title">non existing item:</h2>
<button class="button is-fullwidth"
@click="apiRequest(1123, 'nonExistingCharacter')">
get</button>
<pre>{{nonExistingCharacter}}</pre>
</div>
</div>
</div>So as we see there is no response when server responded with 404. Any tips to read this message from 404 response?
I also tried this with fetch but i think the problem is the same. When server returning 404 I've got just error and nothing more. Is it a good practice to return those messages with 404?? I also see that on 404 there is a CORS message in console (maybe this is a key)
Thanks for help. :)
