Eğitim / Kodlama 29 Mart 2024

How to Extract an Error Object from a Blob API Response in JavaScript

I encountered an issue when I made a GET request in my React project which was supposed to return a file I could download. For the file to download properly, I had to make the response type a blob.

But if an error occurred when the server returns a JSON object, I’d be unable to get that object because I had already defined the response type as a blob. And if I remove the blob definition, the file would just return as regular JSON and might not download properly.

So how do I get the blob to download it and retrieve the error object in case something didn’t go well from the server? Thankfully, there’s a way to achieve this.

This guide will show you how to retain a JSON object for error handling purposes, while being able to download a file from a server. We’ll be using Axios, a JavaScript library used for making HTTP requests, to make our API call.

Step 1: Define the Response Type in the API Call

First, define a function that makes the HTTP request to the server. In this case, we’re expecting a file, so the conventional HTTP verb would be GET.

The response type for Axios requests is JSON by default, but we want 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'})?.data;
    return res;
}

Step 2: Convert Blob To Text

In the previous step, we were able to get our file as a blob easily. But when it comes to showing the error, we need it to show as JSON.

First, we need to wrap the request in a try/catch statement to specify what should happen if an error is thrown while the request is being made.

import axios from "axios";

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

The type conversion was done inside the catch block. First, we converted the response data to a JSON string using the text() method from JavaScript’s Fetch API.

Finally, we used the JSON.parse() method to convert that string to actual JSON. That way, we can access the object in its intended format while being able to retrieve the file from the server if there is no error.

Logging the error object to the console will result in something like this:

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

Conclusion

This is one of the problems I faced in real life, so I thought I’d share it in case someone else encounters it.

Let me know your thoughts about the article, and feel free to make any suggestions you think could improve my solution.

Thanks for reading!

source

Spread the love <3

You may also like...

Mar
11
2024
12
Bitcoin rekora doymuyor! Tüm zamanların zirvesinde

Bitcoin rekora doymuyor! Tüm zamanların zirvesinde

Bitcoin fiyatındaki artış hızla büyümeye devam ederken, kripto para fiyatları da yeni rekor seviyelere yükseldi. Bitcoin, tarihinde ilk kez 71...

Spread the love <3
Mar
09
2024
10
Deniz, kum, güneş demeden: Kilo verme garantili uygulamalar

Deniz, kum, güneş demeden: Kilo verme garantili uygulamalar

2024 yılına spor ile girmek isteyenler için harika bir içerik hazırladık. Deniz, kum, güneş demeden kilo vermek mi istiyorsunuz? O...

Spread the love <3
Nis
14
2024
0
Bitcoin fiyatı bir gecede eridi! İşte son durum

Bitcoin fiyatı bir gecede eridi! İşte son durum

Kripto para dünyasında çalkantı yaşanmaya devam ediyor. Bir süredir rekor üstüne rekor tazeleyen Bitcoin, sadece birkaç saat içerisinde yüzde 10’a...

Spread the love <3
Nis
09
2024
0
In pictures: Total solar eclipse plunges stretch of North America into darkness

In pictures: Total solar eclipse plunges stretch of North America into darkness

A total solar eclipse plunged the skies along a swathe of North America into darkness. The moon completely blocked out...

Spread the love <3
Whatsapp İletişim
Merhaba,
Size nasıl yardımcı olabilirim ?