Esquema de Respuesta de Una Solicitud de Axios

3 minuto(s)

En esta página:

Axios es una de las herramientas favoritas de los desarrolladores que trabajan con React JS, Vue, Angular y otras librerías, frameworks y entornos similares. Talves estás comenzando a trabajar por primera ves con axios o puede que ya seas un usuario con experiencia. En este post vamos a conocer el Esquema de Respuesta de Una Solicitud de Axios. Por ejemplo cuando consumimos los datos de un endpoint de una API REST, este nos brinda una respuesta con cierta estructura que es importante que conoscamos para asi saber como trabajar con los datos que recibimos en Axios, vamos con ello.

Antes de continuar, te invito a escuchar el Podcast: “Dominio del trabajo con Varios Lenguajes de Programación” y “ChatGPT ¿ Dejará sin empleo a los Desarrolladores ?” (Anchor Podcast):

Spotify:	Sound Cloud:	Apple Podcasts	Anchor Podcasts

Bien ahora continuemos con el Post: Esquema de Respuesta de Una Solicitud de Axios.

Esquema de Respuesta de Una Solicitud de Axios

La respuesta a una solicitud (request) con Axios contiene los siguientes datos (He colocado comentarios para describir cada tipo de dato):


{
  // 'data' es la respuesta proporcionada por el servidor 
  data: {},

  // 'status' es el código de estado HTTP de la respuesta del servidor
  status: 200,

  // 'statusText' es el mensaje de estado HTTP de la respuesta del servidor
  // A partir de HTTP/2, el texto de estado está en blanco o no es compatible.
  // (HTTP/2 RFC: https://www.rfc-editor.org/rfc/rfc7540#section-8.1.2.4) 
  statusText: 'OK',

  // 'headers' son los encabezados HTTP con los que respondió el servidor
  // Todos los nombres de los encabezados están en minúsculas y se puede acceder a ellos usando la notación de corchetes.
  // Ejemplo: `response.headers['content-type']`
  headers: {},

  // 'config' es la configuración que se proporcionó a 'axios' para la solicitud
  config: {},

  // 'request' es la solicitud que generó esta respuesta
  // Es la última instancia de ClientRequest en node.js (en redireccionamientos) 
  // y una instancia de XMLHttpRequest en el navegador
  request: {}
}

{

// 'data' es la respuesta proporcionada por el servidor

data: {},

// 'status' es el código de estado HTTP de la respuesta del servidor

status: 200,

// 'statusText' es el mensaje de estado HTTP de la respuesta del servidor

// A partir de HTTP/2, el texto de estado está en blanco o no es compatible.

// (HTTP/2 RFC: https://www.rfc-editor.org/rfc/rfc7540#section-8.1.2.4)

statusText: 'OK',

// 'headers' son los encabezados HTTP con los que respondió el servidor

// Todos los nombres de los encabezados están en minúsculas y se puede acceder a ellos usando la notación de corchetes.

// Ejemplo: `response.headers['content-type']`

headers: {},

// 'config' es la configuración que se proporcionó a 'axios' para la solicitud

config: {},

// 'request' es la solicitud que generó esta respuesta

// Es la última instancia de ClientRequest en node.js (en redireccionamientos)

// y una instancia de XMLHttpRequest en el navegador

request: {}

}

Entonces si usamos el método then de JavaScript obtenemos una respuesta de la siguiente manera:


axios.get('/producto/47')
  .then(function (response) {
    console.log(response.data);
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.config);
});

axios.get('/producto/47')

.then(function (response) {

console.log(response.data);

console.log(response.status);

console.log(response.statusText);

console.log(response.headers);

console.log(response.config);

});

Si usas el método catch o pasas una devolución de llamada de rechazo como segundo parámetro de then, la respuesta estará disponible a través del objeto error.

Conclusión

En este post hemos conocido el esquema (schema) de una respuesta cuando hacemos una solicitud a una API REST u otro sistema que retorne datos con Axios. Esta estructura es la misma para las herramientas: React JS, Vue JS, Angular, etc. Conocer la estructura de datos que devuelve axios, te ayudará a manejar adecuadamente la información de tu aplicación.