Extract an Error Object from a Blob API Response in JavaScript

I encountered a difficulty after I made a GET request in my React challenge which was alleged to return a file I might obtain. For the file to obtain correctly, I needed to make the response sort a blob.

But if an error occurred when the server returns a JSON object, I’d be unable to get that object as a result of I had already outlined the response sort as a blob. And if I take away the blob definition, the file would simply return as common JSON and won’t obtain correctly.

So how do I get the blob to obtain it and retrieve the error object in case one thing did not go nicely from the server? Thankfully, there is a approach to obtain this.

This information will present you the right way to retain a JSON object for error dealing with functions, whereas with the ability to obtain a file from a server. We’ll be utilizing Axios, a JavaScript library used for making HTTP requests, to make our API name.

Step 1: Define the Response Type within the API Call

First, outline a perform that makes the HTTP request to the server. In this case, we’re anticipating a file, so the standard HTTP verb could be GET.

The response sort for Axios requests is JSON by default, however we need to change that to a blob like this:

import axios from "axios";

const getFileFromServer = () => {
    const res = await axios.get('https://api.some-server.com', {responseType: 'blob'})?.information;
    return res;
}

Step 2: Convert Blob To Text

In the earlier step, we had been capable of get our file as a blob simply. But in terms of displaying the error, we’d like it to point out as JSON.

First, we have to wrap the request in a strive/catch assertion to specify what ought to occur if an error is thrown whereas the request is being made.

import axios from "axios";

const getFileFromServer = async () => {
    strive {
        const res = await axios.get('https://api.some-server.com', {responseType: 'blob'}).information;
    return res;
    }
    catch (error) {
        let errorResponse = await error.response.information.textual content();
        const errorObj = JSON.parse(response);
        console.log(errorObj) // log error to console
    }
}

The sort conversion was carried out contained in the catch block. First, we transformed the response information to a JSON string utilizing the textual content() methodology from JavaScript’s Fetch API.

Finally, we used the JSON.parse() methodology to transform that string to precise JSON. That method, we will entry the article in its supposed format whereas with the ability to retrieve the file from the server if there isn’t a error.

Logging the error object to the console will lead to one thing like this:

{
  "statusCode": 400,
  "message": "Some error occured"
}

Conclusion

This is among the issues I confronted in actual life, so I believed I’d share it in case another person encounters it.

Let me know your ideas in regards to the article, and be at liberty to make any ideas you suppose might enhance my resolution.

Thanks for studying!