Menu
I'm using blob responseType with Axios in my VueJS app for downloading a document from the server. When the response code is 200 it works fine and download the file but when there is any http error, I'm not able to read the status code when I catch the error because the error is a JSON response.
Has anyone had a similar issue and worked out a way to convert the blob response type to json and thrown an error based on the status code?
I have tried sending the response as a plain text from Laravel backend and tried converting the response to JSON or text in the front-end but no luck.
I have tried reading error response headers but no luck.
Axios({
url: 'xxxx',
method: 'GET',
responseType: 'blob',
})
.then((response) => {
//code to read the response and create object url with the blob and download the document
})
.catch((error) => {
console.log('Error', error.message); //nothing
console.log('Error', error.error); //undefined
console.log('Error', error.data); //undefined
const blb = new Blob([error], {type: "text/plain"});
const reader = new FileReader();
// This fires after the blob has been read/loaded.
reader.addEventListener('loadend', (e) => {
const text = e.srcElement.result;
console.log(text);
});
// Start reading the blob as text.
reader.readAsText(blb);
});
I just want to throw the error message based on the status code. If it's 401 just want it to be unauthorized and anything else throw it on to the component.
764
Axios Response Objects When we send an HTTP request to a remote server, we get a response with specific information from that server. Axios may be used to retrieve this response. The received response, according to Axios documentation, comprises the following information.
When the response's content type is application/json, Axios will automatically try to parse the response into a JavaScript object. Keep in mind that the response headers are sent by the server. So if the server sends back a different content type, you may need to handle it the response yourself.
Error Handling If an error occurs while submitting an HTTP request using Axios, the returned error object contains detailed information that will assist us in determining the exact location of the error. There are three places where errors can arise, as seen in the following example.
The response is provided as a promise because Axios is promise-based. To obtain the response and catch any errors, we must utilize the then () and catch () functions. Let's look at how we can deal with a POST request's response.
I believe you might be using the error variable in your catch() incorrectly.
Axios passes an error object that has a response property that is where you will want to look for your error or message.
https://github.com/axios/axios#handling-errors
On a side note if you can catch the error server side you could try setting the Content-type header to text/plain. Using either header('Content-Type: plain/text') or Laravel's Response Methods
119
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
