BLOG POST

Axios es un cliente HTTP basado en promesas que funciona en navegador o del lado del servidor con node.js. Es una de las librerías más populares y cuenta con algunas características que la API Fetch no proporciona por defecto como son los interceptors, convierte la respuesta del servidor a JSON automáticamente y también proporciona protección contra ataques cross-site request forgery (XSRF).

Para empezar necesitamos instalar axios mediante npm con el siguiente comando:

npm install axios

Después en nuestro proyecto podemos crear un nuevo archivo llamado http.service.js y dentro de este archivo vamos a escribir el siguiente código:

import axios from 'axios';
// Se crea instancia http con valores default
const httpInstance = axios.create( {
    baseURL: ‘https: //www.api.com/’
});

En esta sección de código solo importamos la librería de axios y creamos una instancia que nos permitirá utilizar ciertos valores por default que llevaran todas nuestras peticiones, en nuestro caso es la URL del servidor. Para más información sobre todos los valores que acepta axios, puedes revisar su documentación en la sección “Request Config” dando click aquí.

Podemos utilizar un método especial de axios llamado interceptors que nos ayuda a capturar las peticiones o respuestas.

// Interceptor para enviar datos recibidos y checar errores
httpInstance.interceptors.response.use(null, error => {
    const expectedError = error.response && error.response.status >= 400 && error.response.status < 500;
    if (!expectedError) {
        // Loggear mensaje de error a un servicio como Sentry
        // Mostrar error genérico al usuario
        return Promise.reject(error);
    }
);
 
export default httpInstance;

En esta sección verificamos si la respuesta nos arrojó un error y si este error se encuentra del rango de errores esperados (errores del cliente) y en caso de ser un error inesperado (errores del servidor con status >= 500) podemos mostrar algún mensaje genérico al usuario y hacer un log de este tipo de errores. Por ultimo reenviamos la respuesta del servidor al bloque de código que realizo la petición y exportamos nuestra instancia de axios.

Para realizar peticiones simplemente tenemos que importar la instancia de axios que creamos en el archivo http.service.js de la siguiente forma:

import http from './http.service';

Luego podemos hacer una petición de la siguiente forma:

http.get(‘usuarios’).then(usuarios => {
    console.log(usuarios);
}).catch(error => {
    console.error(error);
})

Conclusión

Hacer peticiones mediante axios nos ahorra algunas líneas de código además de proporcionarnos características útiles como los interceptors. No te olvides de revisar la documentación de axios para conocer más detalles Axios Docs.