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

Encontré un problema cuando realicé una solicitud GET en mi proyecto de React que se suponía que devolvería un archivo que podía descargar. Para que el archivo se descargara correctamente, tuve que hacer que la respuesta fuera un blob.

Pero si ocurriera un error cuando el servidor devuelve un objeto JSON, no podría obtener ese objeto porque ya había definido el tipo de respuesta como un blob. Y si elimino la definición de blob, el archivo simplemente regresará como JSON normal y es posible que no se descargue correctamente.

Entonces, ¿cómo consigo que el blob lo descargue y recupere el objeto de error en caso de que algo no haya salido bien desde el servidor? Afortunadamente, hay una manera de lograrlo.

Esta guía te mostrará cómo conservar un objeto JSON para fines de manejo de errores y, al mismo tiempo, podrás descargar un archivo desde un servidor. Usaremos Axios, una biblioteca de JavaScript utilizada para realizar solicitudes HTTP, para realizar nuestra llamada API.

Paso 1: Definir el tipo de respuesta en la llamada API

Primero, define una función que realice la solicitud HTTP al servidor. En este caso, esperamos un archivo, por lo que el verbo HTTP convencional sería GET.

El tipo de respuesta para las solicitudes de Axios es JSON de forma predeterminada, pero queremos cambiarlo a un blob como este:

import axios from "axios";

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

Paso 2: Convertir el Blob a Texto

En el paso anterior, pudimos obtener nuestro archivo como un blob fácilmente. Pero cuando se trata de mostrar el error, necesitamos que se muestre como JSON.

Primero, necesitamos envolver la solicitud en una declaración try/catch para especificar qué debería suceder si se genera un error mientras se realiza la solicitud.

import axios from "axios";

const obtenerArchivoDelServidor = async () => {
    try {
        const respuesta = await axios.get('https://api.some-server.com', {responseType: 'blob'}).data;
    return respuesta;
    }
    catch (error) {
        let errorRespuesta = await error.response.data.text();
        const errorObjeto = JSON.parse(response);
        console.log(errorObjeto) // mostramos el error por consola
    }
}

La conversión de tipo se realizó dentro del bloque catch. Primero, convertimos los datos de respuesta a una cadena JSON usando el método text() de la API Fetch de JavaScript.

Finalmente, utilizamos el método JSON.parse() para convertir esa cadena a JSON real. De esa manera, podemos acceder al objeto en el formato previsto y al mismo tiempo recuperar el archivo del servidor si no hay ningún error.

Mostrando el objeto de error en la consola dará como resultado algo como esto:

{
  "statusCode": 400,
  "message": "Algún error ocurrió"
}

Conclusión

Este es uno de los problemas que enfrenté en la vida real, así que pensé en compartirlo en caso de que alguien más lo encuentre.

Déjame saber tu opinión sobre el artículo y no dudes en hacer cualquier sugerencia que creas que podría mejorar mi solución.

¡Gracias por leer!