Realización de solicitudes HTTP asíncronas en JavaScript con Axios

Axios es una biblioteca JavaScript basada en Promised que envía solicitudes HTTP. Este tutorial le muestra cómo enviar varias solicitudes HTTP con Axios a una API JSON.

Introducción

Axios es una biblioteca de JavaScript basada en Promised que se utiliza para enviar solicitudes HTTP. Puedes pensarlo como una alternativa a la función de búsqueda nativa (). de JavaScript

Usaremos funciones como Promises, async/await y otros patrones de diseño de JavaScript modernos en este tutorial. Si desea ponerse al día o refrescar la memoria, le interesará leer estos artículos antes de continuar:

  • Este artículo utiliza la notación de flecha introducida en ES2015 para definir funciones. Puedes leer más al respecto en el artículo Funciones de flecha en JavaScript.
  • Axios es una biblioteca basada en Promised. Si necesitas saber más sobre Promises, puedes leer nuestra guía Promesas en Node.js.
  • Para mejorar nuestra experiencia con Promises, usaremos la sintaxis async/await de Node.js. ¡Puedes leer nuestro artículo Node.js Async Await en ES7 para dominar esta característica!

En este tutorial, realizaremos solicitudes GET, POST, PUT y DELETE a una API REST utilizando Axios. Aprendamos un poco más sobre esta biblioteca.

¿Qué es Axios?

Axios es una biblioteca de cliente HTTP moderna basada en Promise. Esto significa que Axios se usa para enviar una solicitud HTTP y manejar sus respuestas, todo usando las promesas de JavaScript. Axios es compatible con Node.js y JavaScript en el navegador.

Axios también es gratuito y de código abierto. Puedes visitar su Repositorio GitHub para ver su código y documentación.

Viene incorporado con algo de seguridad web al proteger a los usuarios contra ataques como Falsificación de solicitud entre sitios (CSRF).

Como resultado de sus funciones y facilidad de uso, se ha convertido en una opción popular para los desarrolladores de JavaScript cuando realizan llamadas HTTP. Empecemos configurando Axios.

Configuración de Axios

Primero, creemos una nueva carpeta e inicialicemos NPM con la configuración predeterminada:

1
2
3
$ mkdir axios-tutorial
$ cd axios-tutorial
$ npm init -y

A continuación, podemos usar NPM para instalar la biblioteca:

1
$ npm i --save axios

Nota: si está utilizando TypeScript en su proyecto (por ejemplo, con una aplicación Angular), la biblioteca Axios viene con sus definiciones de tipos. ¡No tiene que dar un paso adicional para instalar tipos!

Si está en el navegador, también puede usar un CDN para importar el script.

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

Este tutorial usa Node.js con CommonJS para cargar nuestras bibliotecas. CommonJS es un estándar para cargar módulos, en particular, especifica la palabra clave require() para hacerlo. Los ejemplos deberían funcionar independientemente de la plataforma sin ningún cambio.

Ahora que hemos configurado Axios en nuestro entorno de desarrollo, pasemos directamente a realizar solicitudes HTTP.

Escritura de solicitudes asíncronas con Axios

En Node.js, las actividades de entrada y salida, como las solicitudes de red, se realizan de forma asíncrona. Como Axios usa Promises para realizar solicitudes de red, las devoluciones de llamadas no son una opción cuando se usa esta biblioteca. Interactuamos con Axios usando Promises, o las palabras clave async/await que son una sintaxis alternativa para usar Promises.

Importación de Axios

Si usa CommonJS, hay dos métodos en Node.js para importar la biblioteca.

Puede importar el módulo en su código de esta manera:

1
const axios = require('axios')

Sin embargo, muchos editores de código y IDE pueden ofrecer un mejor autocompletado al importar de esta manera:

1
const axios = require('axios').default;

Esto funciona mientras se usa CommonJS para importar módulos. Le recomendamos que utilice el segundo método como autocompletado y ver la documentación del código en su IDE puede facilitar el proceso de desarrollo.

Con la biblioteca importada, podemos comenzar a realizar solicitudes HTTP.

Envío de solicitudes GET

¡Enviemos nuestra primera solicitud con Axios! Será una solicitud GET, normalmente utilizada para recuperar datos.

Haremos una solicitud HTTP a una API externa que nos envía una lista de publicaciones de blog. Al recibir los datos, registraremos su contenido en la consola. Si encontramos un error, lo registraremos también.

Veamos cómo hacer uno usando la sintaxis predeterminada de Promise. En un nuevo archivo llamado getRequestPromise.js, agregue el siguiente código:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
const axios = require('axios').default;

axios.get('https://jsonplaceholder.typicode.com/posts')
    .then(resp => {
        console.log(resp.data);
    })
    .catch(err => {
        // Handle Error Here
        console.error(err);
    });

Para realizar una solicitud GET, pasamos la URL del recurso como argumento en el método axios.get().

Si ejecuta este código con node getRequestPromise.js, verá el siguiente resultado:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
[ { userId: 1,
    id: 1,
    title:
     'sunt aut facere repellat provident occaecati excepturi optio reprehenderit',
    body:
     'quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum
 est autem sunt rem eveniet architecto' },
  { userId: 1,
    id: 2,
    title: 'qui est esse',
    body:
     'est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro ve
l nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla' },
...

Ahora veamos cómo podemos reescribir el mismo código usando las palabras clave async/await. En un nuevo archivo getRequestAsyncAwait.js, agregue el siguiente código:

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

const sendGetRequest = async () => {
    try {
        const resp = await axios.get('https://jsonplaceholder.typicode.com/posts');
        console.log(resp.data);
    } catch (err) {
        // Handle Error Here
        console.error(err);
    }
};

sendGetRequest();

Para usar la sintaxis async/await, necesitamos envolver la llamada a la función axios.get() dentro de una función async. Encerramos la llamada al método con un bloque try...catch para que podamos capturar cualquier error, similar al método catch() que usamos en la versión Promise. La variable que recibió los datos HTTP tuvo que usar la palabra clave await para asegurarse de que se recibieron los datos asincrónicos antes de continuar. De aquí en adelante, solo usaremos la sintaxis async/await en nuestros ejemplos.

Ejecutar este código imprimirá el mismo resultado en la consola que el ejemplo original de Promise.

Una respuesta de Axios para una solicitud HTTP (el objeto resp en el ejemplo) contendrá la siguiente información sobre la respuesta HTTP:

  1. data: el cuerpo de respuesta proporcionado por el servidor. Si la respuesta del servidor es un JSON, Axios analizará automáticamente los datos en un objeto JavaScript.
  2. status: el código de estado HTTP de la respuesta, p. ‘200’, ‘400’, ‘404’.
  3. statusText: el mensaje de estado HTTP de la respuesta del servidor, p. OK, Solicitud incorrecta, No encontrado.
  4. headers: los encabezados HTTP que acompañan a la respuesta.
  5. config: la configuración que se proporcionó a la API de Axios para la solicitud.
  6. solicitud: la solicitud nativa que generó la respuesta. En Node.js, será un objeto ClientRequest. En el navegador, será un objeto XMLHTTPRequest.

Ahora que hemos visto cómo hacer una solicitud GET con Axios, veamos cómo hacer una solicitud POST.

Envío de solicitudes POST

Enviamos solicitudes POST para crear un nuevo recurso en una API REST. En este caso, realizaremos una solicitud POST con Axios para crear una nueva publicación de blog para un usuario.

Cree un nuevo archivo llamado postRequest.js e ingrese el siguiente código:

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

const newPost = {
    userId: 1,
    title: 'A new post',
    body: 'This is the body of the new post'
};

const sendPostRequest = async () => {
    try {
        const resp = await axios.post('https://jsonplaceholder.typicode.com/posts', newPost);
        console.log(resp.data);
    } catch (err) {
        // Handle Error Here
        console.error(err);
    }
};

sendPostRequest();

Para enviar un POST con axios.post(), primero debe proporcionar la URL y luego proporcionar los datos de la solicitud en el segundo argumento. En este caso, estamos enviando los datos en la variable newPost, que se enviará a nuestra API como JSON.

Ejecutar esto con node postRequest.js produce el siguiente resultado exitoso:

1
2
3
4
{ userId: 1,
  title: 'A new post',
  body: 'This is the body of the new post',
  id: 101 }

Avancemos para ver cómo podemos enviar solicitudes PUT.

Envío de solicitudes PUT

Las solicitudes PUT se utilizan para reemplazar datos en un punto final. Puede usar el método axios.put() para enviar una solicitud PUT de manera similar a como enviamos las solicitudes POST.

Para verlo en acción, creemos una solicitud PUT que actualice las propiedades de la primera publicación del blog. Cree un nuevo archivo llamado putRequest.js con el siguiente código:

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

const updatedPost = {
    id: 1,
    userId: 1,
    title: 'A new title',
    body: 'Update this post'
};

const sendPutRequest = async () => {
    try {
        const resp = await axios.put('https://jsonplaceholder.typicode.com/posts/1', updatedPost);
        console.log(resp.data);
    } catch (err) {
        // Handle Error Here
        console.error(err);
    }
};

sendPutRequest();

Al igual que con POST, proporcionamos la URL y los datos que queremos que se carguen. Ejecutar esto con node putRequest.js nos da:

1
{ id: 1, userId: 1, title: 'A new title', body: 'Update this post' }

Ahora que hemos cubierto dos formas de cargar datos, veamos cómo podemos eliminar datos.

Envío de solicitudes DELETE

Puede enviar una solicitud HTTP DELETE utilizando el método axios.delete() para eliminar datos de una API RESTful.

Eliminemos una publicación de blog enviando una solicitud DELETE con Axios. En un nuevo archivo llamado deleteRequest.js, ingresa lo siguiente:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
const axios = require('axios').default;

const sendDeleteRequest = async () => {
    try {
        const resp = await axios.delete('https://jsonplaceholder.typicode.com/posts/1')
        console.log(resp.data);
    } catch (err) {
        // Handle Error Here
        console.error(err);
    }
};

sendDeleteRequest();

La función axios.delete() solo necesita la URL del recurso que queremos eliminar. Ejecutar este programa con node putRequest.js muestra esto en la terminal:

1
{}

Esto significa que no se devolvieron datos, lo cual está bien cuando se elimina un recurso. Sin embargo, como Axios no arrojó ningún error, estamos bastante seguros de que se procesó correctamente.

Echemos un vistazo a una forma alternativa de enviar solicitudes de Axios usando configuraciones,

Configuración de solicitudes {#configuración de solicitudes}

Como alternativa a especificar la función para realizar la solicitud, podemos proporcionar un objeto JavaScript que configure cómo Axios envía una solicitud. Por ejemplo, si quisiera enviar una solicitud PUT sin usar axios.put(), podemos configurar Axios como:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const axios = require('axios').default;

const sendRequest = async () => {
    try {
        const resp = await axios({
            method: 'PUT',
            url: 'https://jsonplaceholder.typicode.com/posts/1',
            data: {
                id: 1,
                userId: 1,
                title: 'A new title',
                body: 'Update this post'
            }
        });

        console.log(resp.data);
    } catch (err) {
        // Handle Error Here
        console.error(err);
    }
}

sendRequest();

En este caso, usamos axios como una función directamente. Le pasamos una función de JavaScript que contiene el método HTTP que se usa en el método, el punto final de la API en la url y cualquier dato en la solicitud en la propiedad data.

El resultado final es el mismo, por lo que puede usar esta forma de hacer solicitudes si le atrae más.

Ahora que tenemos un control sobre el envío de solicitudes, modifiquémoslas configurando encabezados personalizados.

Establecer encabezados personalizados

Para ciertas API, una solicitud sin procesar debe tener datos adicionales en los encabezados para ser procesada. Un ejemplo común sería establecer encabezados que autentiquen la solicitud HTTP.

Si usáramos JWT para autenticación y autorización, tendríamos que agregarlo a nuestras solicitudes para que la API no lo rechace servidor.

Veamos cómo podemos agregar encabezados personalizados a una llamada al método axios.get():

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

const sendGetRequest = async () => {
    try {
        const resp = await axios.get('https://jsonplaceholder.typicode.com/posts', {
            headers: {
                'authorization': 'Bearer YOUR_JWT_TOKEN_HERE'
            }
        });

        console.log(resp.data);
    } catch (err) {
        // Handle Error Here
        console.error(err);
    }
};

sendGetRequest();

Como puede ver en este ejemplo de código, podemos pasar la configuración con la propiedad headers para establecer encabezados personalizados para la solicitud. La propiedad headers es un objeto de JavaScript con claves y valores de cadena.

Puede agregar esta propiedad a los otros métodos de Axios, como axios.post(), axios.put(), axios.delete(). La propiedad headers debe ingresarse después del objeto data en axios.post() y axios.put().

A continuación, veamos cómo podemos establecer un encabezado personalizado usando la configuración de la API de Axios:

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

axios({
    method: 'GET',
    url: 'https://jsonplaceholder.typicode.com/posts',
    headers: {
        'authorization': 'Bearer YOUR_JWT_TOKEN_HERE'
    }
}).then(resp => {
    console.log(resp.data);
}).catch(err => {
    // Handle Error Here
    console.error(err);
});

¡En este caso, los encabezados son solo otra propiedad del objeto JavaScript!

Conclusión

En este artículo, aprendió a crear solicitudes HTTP asíncronas con Axios en Node.js y JavaScript del navegador. Realizó solicitudes con métodos de Axios: axios.get(), axios.post(), axios.put() y axios.delete(). También usó la API de Axios para enviar solicitudes HTTP configurando un objeto de JavaScript con los detalles de la solicitud. Finalmente, agregó encabezados personalizados en sus solicitudes.

¡Esperamos que ahora comprenda bien cómo usar Axios para su próxima aplicación! ¿Qué es lo próximo que vas a construir?

El código fuente de este artículo está disponible en GitHub.