Envío de solicitudes PUT HTTP con Axios

En esta guía práctica, veremos cómo enviar una solicitud PUT HTTP con la biblioteca Axios de JavaScript, en el entorno Node.js, con ejemplos y mejores prácticas.

Introducción

Axios es una biblioteca de JavaScript para realizar solicitudes HTTP, ya sea en el navegador o en Node.js.

A diferencia de la popular biblioteca Peticiones, Axios está basado de forma nativa en promesas, lo que lo hace más adecuado para las aplicaciones modernas que aprovechan las nuevas funciones de JavaScript, como Promises y el sintaxis async/await.

Si tiene experiencia en desarrollo web y solo desea encontrar una respuesta sobre cómo enviar una solicitud PUT con Axios, la historia larga es:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
const axios = require('axios');

// Wrapper, specific put() function
const res = await axios.put('/api/article/123', {
    title: 'Making PUT Requests with Axios',
    status: 'published'
});

// General HTTP function
const res = await axios({
    method: 'put',
    url: '/api/article/123',
    data: {
        title: 'Making PUT Requests with Axios',
        status: 'published'
    }
});

Sin embargo, si es la primera vez que trabaja con Axios o le gustaría saber más sobre cómo funciona, ¡siga leyendo!

Solicitudes HTTP y verbos

La web moderna se basa en el protocolo HTTP y un ciclo de vida de solicitud-respuesta, donde un cliente solicita un recurso y un servidor responde con él.

El protocolo HTTP define una serie de métodos con distintas intenciones, a saber, GET, POST, DELETE, etc., que permiten a un cliente "declarar" su intención. Uno de los métodos HTTP más comunes es el método PUT, que se usa más comúnmente para enviar datos a un servidor, ya sea para crear un nuevo recurso o para parchear o editar datos en un recurso existente.

Por ejemplo, un servicio API REST para un blog puede tener una ruta que le permita realizar operaciones CRUD (Crear, Leer, Actualizar, Eliminar) en el recurso artículo usando la ruta /api/article /[id].

Enviar una solicitud GET a esta ruta podría devolver el artículo especificado por id. Enviar una solicitud PUT a esta ruta editaría el artículo de atributos especificado. Estos atributos se pueden especificar en el cuerpo de la solicitud, que se serializa en formato JSON de forma predeterminada.

If you'd like to read more about creating REST APIs with Node.js - read our Guía para construir una API REST con Node y Express!

Envío de una solicitud PUT con Axios

Veamos cómo podemos usar la biblioteca Axios para enviar una solicitud HTTP PUT desde su aplicación JavaScript.

Primero, puedes instalar axios usando yarn o npm:

1
$ npm install axios --save
1
$ yarn add axios

También está disponible para aplicaciones frontend a través de una serie de CDN, como jsDelivr:

1
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

Una vez que la biblioteca esté instalada, deberá crear una instancia:

1
const axios = require('axios');

La forma más sencilla de hacer la llamada PUT es simplemente usar la función put() de la instancia axios y proporcionar el cuerpo de esa solicitud en forma de un objeto JavaScript:

1
2
3
4
const res = await axios.put('/api/article/123', {
    title: 'Making PUT Requests with Axios',
    status: 'published'
});

Los únicos argumentos necesarios aquí son la URL y los datos que desea enviar, que en nuestro caso es el título en el que queremos editar en el recurso del artículo.

El objeto de JavaScript que hemos creado para contener el título y el estado se serializa en JSON, se envía a un controlador de solicitudes, que realiza una acción y devuelve un resultado. El cuerpo de la solicitud que estamos enviando es el JSON serializado, que se puede recuperar fácilmente en el back-end.

{.icon aria-hidden=“true”}

Dado que se envía JSON, que es un formato muy universal, la mayoría de los marcos no tendrán problemas para leer los datos enviados y deserializarlos en cualquier representación que use el back-end, independientemente de la pila tecnológica.

El objeto devuelto por Axios, res en este caso, tiene un esquema estándar para todas las llamadas:

1
2
3
4
5
6
7
8
{
    data: {},
    status: 200,
    statusText: 'OK',
    headers: {},
    config: {},
    request: {}
}

Dónde:

  • data: los datos devueltos por el servicio al que llamó; normalmente, una respuesta JSON de una API REST.
  • status: el estado HTTP devuelto por el servicio, que indica cómo fue la operación, como 200 (OK), 301 (Movido permanentemente), 404 (No encontrado), etc.
  • statusText: el texto de estado HTTP que describe el código de estado en un formato legible por humanos, como 'OK', 'Moved Permanently' o 'Not Found'.
  • headers: Un objeto que contiene todos los encabezados devueltos por el servicio, como 'Cache-Control'.
  • config: El objeto de configuración proporcionado a la llamada (opcional).
  • request: el objeto de solicitud para esta llamada, que es una ClientRequest en Node.js o XMLHttpRequest en el navegador.

Otra forma de realizar una solicitud PUT con Axios es un método más genérico en el que especifica el método HTTP dentro de los argumentos.

Esto se hace usando el método predeterminado axios() y el objeto de configuración:

1
2
3
4
5
6
7
8
const res = await axios({
    method: 'put',
    url: '/api/article/123',
    data: {
        title: 'Making PUT Requests with Axios',
        status: 'published'
    }
});

El resultado de esta llamada es exactamente el mismo que el de la llamada axios.put() de antes - la única diferencia es que el método axios.put() es un método de conveniencia que envuelve el método general, imbuyéndolo con el método: campo 'poner'.

axios() frente a put()

Entonces, ¿por qué usaría un método sobre el otro? Eso puede depender de algunos factores, como la legibilidad o el contexto en el que se usa el método, pero también en gran medida: su preferencia personal.

La llamada axios() más genérica es más flexible ya que todas las opciones/configuraciones se especifican dentro del mismo objeto, lo que facilita agregar más configuraciones, como encabezados, por ejemplo, o cambiar verbos de método.

Dado que el método put() simplemente envuelve axios(), la funcionalidad subyacente es fundamentalmente la misma.

Manejo de errores

{.icon aria-hidden=“true”}

Nota: Al enviar solicitudes, es posible que no siempre obtenga el resultado esperado.

En términos generales, querrá intentar enviar una solicitud y atrapar excepciones si surgen en ese proceso, lo que cambia un poco el procedimiento de llamada:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
try {
    const { data } = await axios({
        method: 'put',
        url: '/api/article/123',
        data: {
            title: 'Making PUT Requests with Axios',
            status: 'published'
        }
    });

    console.log(data);
} catch (err) {
    if (err.response.status === 404) {
        console.log('Resource could not be found!');
    } else {
        console.log(err.message);
    }
}

La principal diferencia aquí es el manejo de errores, que usa el objeto respuesta dentro del error para determinar la causa en lugar del objeto datos devuelto por la llamada misma.

Por lo general, el manejo de errores es más sólido que simplemente verificar si el estado es un solo número entero; sin embargo, de esta manera puede alterar el flujo de la lógica en función de cómo se manejó (o no) la solicitud.

Conclusión

En este artículo, brindamos una breve introducción a la biblioteca Axios y al método HTTP PUT.

También mostramos algunos ejemplos de cómo se puede usar Axios para realizar llamadas PUT, así como también cómo se pueden llamar otras configuraciones y cómo se pueden manejar errores simples.