Axios Create: Potencia tus Peticiones HTTP en React

En el dinámico mundo del desarrollo web, la interacción con APIs es una tarea cotidiana. Para los desarrolladores de JavaScript y, en particular, de React, contar con herramientas eficientes para realizar peticiones HTTP es fundamental. Axios, una librería cliente HTTP basada en promesas, se ha consolidado como una de las opciones preferidas, ofreciendo una API intuitiva y potentes funcionalidades. En este artículo, no solo exploraremos cómo realizar las peticiones HTTP básicas (GET, POST, PUT, DELETE) utilizando Axios en un entorno de React JS, sino que profundizaremos en una de sus características más útiles: la propiedad create.

Axios simplifica enormemente el proceso de enviar solicitudes asíncronas HTTP, facilitando la implementación de operaciones CRUD (Crear, Leer, Actualizar, Eliminar). Es una alternativa robusta a la API nativa Fetch de los navegadores, superándola en varios aspectos, especialmente en la facilidad de uso y en la gestión de configuraciones y errores. Prepárate para optimizar tu forma de interactuar con servicios web y construir aplicaciones React más eficientes y mantenibles.

¿Qué es Axios? Un Cliente HTTP Basado en Promesas

Axios es una librería JavaScript que actúa como un cliente HTTP, permitiéndonos realizar solicitudes a un servidor y procesar sus respuestas de manera sencilla. Su principal ventaja radica en su naturaleza basada en promesas, lo que facilita el manejo de operaciones asíncronas y evita el temido "callback hell". A diferencia de la API nativa Fetch, Axios ofrece una experiencia más unificada y potente, con características que la hacen destacar:

• Soporte en Node.js y navegadores: Puede ser utilizada tanto en entornos de servidor como de cliente.
• Transformación automática de datos JSON: Axios maneja automáticamente la conversión de datos JSON, tanto para enviar como para recibir, lo que te ahorra pasos de serialización y deserialización.
• Intercepción de solicitudes y respuestas: Permite añadir funciones (interceptores) que se ejecutan antes de que una solicitud sea enviada o antes de que una respuesta sea manejada. Esto es ideal para añadir tokens de autenticación, registrar errores o transformar datos globalmente.
• Manejo robusto de errores: Proporciona un manejo de errores más claro y fácil de depurar.
• Cancelación de solicitudes: Permite cancelar peticiones HTTP en curso.
• Protección contra ataques XSRF: Soporte incorporado para proteger tu aplicación contra ataques de falsificación de solicitudes entre sitios.

En esencia, Axios nos ayuda a abstraernos de las complejidades de las peticiones HTTP, permitiéndonos enfocarnos en la lógica de nuestra aplicación.

El Poder de axios.create(): Configuración Centralizada y Reutilizable

La propiedad create de Axios es una joya para la organización y eficiencia de tu código. Cuando utilizas axios.create(), lo que estás haciendo es generar una nueva instancia de Axios con una configuración predefinida. ¿Por qué es esto tan útil? La respuesta es simple: te permite centralizar y personalizar la configuración de tus peticiones, evitando la repetición de código y facilitando la gestión de diferentes entornos o APIs.

Imagina que tu aplicación necesita comunicarse con varias APIs diferentes, o que todas tus peticiones a una API específica requieren el mismo baseURL, ciertos headers, o un timeout particular. Sin axios.create(), tendrías que especificar estas opciones en cada una de tus llamadas axios.get(), axios.post(), etc. Esto no solo es repetitivo y propenso a errores, sino que también dificulta futuras modificaciones.

Al crear una instancia, como hicimos con client = axios.create({ baseURL: "https://jsonplaceholder.typicode.com/posts" }), estamos definiendo un cliente HTTP personalizado. Todas las peticiones realizadas a través de esta instancia (por ejemplo, client.get(), client.post()) heredarán automáticamente la configuración base que le hemos dado. Esto significa que si tu baseURL cambia, solo necesitas actualizarlo en un único lugar: la definición de tu instancia. Además de baseURL, puedes configurar:

• headers: Cabeceras HTTP personalizadas (por ejemplo, para autenticación).
• timeout: El tiempo máximo en milisegundos que la petición esperará una respuesta antes de ser abortada.
• params: Parámetros de URL que se aplicarán a todas las solicitudes.
• auth: Credenciales de autenticación.
• responseType: El tipo de datos que esperas en la respuesta ('json', 'text', etc.).

Esta capacidad de crear instancias personalizadas convierte a axios.create() en una herramienta indispensable para aplicaciones de tamaño mediano a grande, promoviendo un código más limpio, modular y fácil de mantener.

Preparando Nuestro Entorno de Desarrollo con React y Axios

Para ilustrar el uso de Axios y su propiedad create, configuraremos un proyecto básico de React. Utilizaremos herramientas modernas para un desarrollo eficiente:

• React JS (versión 18): La popular librería para construir interfaces de usuario.
• Vite JS: Un moderno y rápido constructor de proyectos web.
• TypeScript: Un superconjunto de JavaScript que añade tipado estático, mejorando la robustez del código.
• Axios: Nuestro cliente HTTP.
• CSS vanilla: Estilos básicos para la interfaz.

Comencemos creando el proyecto. Puedes nombrarlo axios-react o como prefieras:

npm init vite@latest

Al ejecutar este comando, selecciona "React" y luego "TypeScript" cuando se te pregunte. Una vez creado el proyecto, navega a su directorio:

cd axios-react

Instala las dependencias necesarias:

npm install

Finalmente, abre el proyecto en tu editor de código (por ejemplo, VS Code):

code .

Dentro de src/App.tsx, podemos limpiar el código inicial y crear un componente base. La idea es desarrollar cuatro componentes diferentes, cada uno dedicado a un tipo de petición HTTP (GET, POST, PUT, DELETE). Para mantener la claridad didáctica, habrá algo de código repetido que, en un proyecto real, se refactorizaría.

Crea la carpeta src/components y dentro de ella, los archivos:

• CreatePost.tsx
• GetPost.tsx
• UpdatePost.tsx
• DeletePost.tsx

Para una mejor organización, crearemos un archivo index.ts dentro de src/components para exportar todos los componentes, facilitando sus importaciones posteriores (conocido como "archivo barril").

Ahora, instalemos Axios en nuestro proyecto:

npm install axios

Y aquí es donde entra en juego axios.create(). Crea la carpeta src/api y dentro de ella, el archivo client.ts. Aquí definiremos nuestra instancia personalizada de Axios y la interfaz de datos que esperamos de la API:

import axios from 'axios'; export const client = axios.create({ baseURL: "https://jsonplaceholder.typicode.com/posts" }); export interface ResponseAPI { userId: number; id: number; title: string; body: string; }

Como ves, hemos configurado una baseURL que apunta a JSONPlaceholder, una API de prueba perfecta para este tipo de ejemplos. Esta configuración centralizada nos ahorrará mucho tiempo y esfuerzo.

Realizando Peticiones HTTP Básicas con Axios

Ahora que tenemos nuestra instancia de Axios configurada, veamos cómo realizar las diferentes operaciones CRUD.

Obteniendo Datos: La Petición GET

La petición GET se utiliza para recuperar datos de un servidor. En nuestro caso, obtendremos una lista de publicaciones. Primero, integraremos el componente GetPost en src/App.tsx:

import { CreatePost, DeletePost, GetPost, UpdatePost } from "./components"; const App = () => { return ( <div> <GetPost /> </div> ); }; export default App;

Dentro de src/components/GetPost.tsx, crearemos el componente que mostrará las publicaciones:

import { useState, useEffect } from 'react'; import { ResponseAPI } from '../api'; import { getPosts } from '../utils'; export const GetPost = () => { const [posts, setPosts] = useState<ResponseAPI[]>([]); useEffect(() => { getPosts().then(data => setPosts(data)); }, []); return ( <> <h2>Posts List</h2> <div className='grid'> {posts.map(post => ( <div key={post.id}> <p>Title: <span>{post.title}</span></p> <p>Body: <span>{post.body}</span></p> <p>User: <span>{post.userId}</span></p> </div> ))} </div> </> ); };

Ahora, la lógica de la petición. Crea la carpeta src/utils y dentro de ella, el archivo getPosts.ts:

import { client, ResponseAPI } from '../api'; export const getPosts = async (): Promise<ResponseAPI[]> => { const { data } = await client.get<ResponseAPI[]>('?_limit=6'); return data; };

Observa que usamos client.get() y pasamos '?_limit=6' para obtener un número limitado de publicaciones. Si no queremos añadir parámetros a la URL base, simplemente pasaríamos comillas vacías ''. La propiedad data de la respuesta de Axios contiene los datos que nos devuelve la API.

Enviando Nuevos Datos: La Petición POST

La petición POST se utiliza para crear nuevos recursos en el servidor. Modifica src/App.tsx para usar <CreatePost />. En src/components/CreatePost.tsx, tendremos un botón para añadir publicaciones y un estado para mostrar las creadas:

import { useState } from 'react'; import { ResponseAPI } from '../api'; import { createPost } from '../utils'; export const CreatePost = () => { const [posts, setPosts] = useState<ResponseAPI[]>([]); const handleClick = async () => { const newPost = await createPost("New Title", "Something new", Date.now()); setPosts(prev => ([newPost, ...prev])); }; return ( <div> <h2>Create Post</h2> <button onClick={handleClick}>Add Post</button> <div className='grid'> {posts.map(post => ( <div key={post.userId}> <p>Title: <span>{post.title}</span></p> <p>Body: <span>{post.body}</span></p> <p>User: <span>{post.userId}</span></p> </div> ))} </div> </div> ); };

En src/utils/createPost.ts, definimos la función para la petición POST:

import { client, ResponseAPI } from '../api'; export const createPost = async (title: string, body: string, userId: number): Promise<ResponseAPI> => { const { data } = await client.post('', { title, body, userId }); return data; };

Aquí, client.post() recibe dos argumentos: la URL relativa (vacía en este caso, ya que nuestra baseURL ya es el endpoint principal) y el objeto con los datos que queremos enviar en el cuerpo de la petición. Axios se encarga automáticamente de serializar este objeto a JSON.

Actualizando Registros Existentes: La Petición PUT

La petición PUT se usa para actualizar un recurso existente. Modifica src/App.tsx para usar <UpdatePost />. En src/components/UpdatePost.tsx, mostraremos una lista de posts y, al hacer clic en uno, lo actualizaremos:

import { useState, useEffect } from 'react'; import { ResponseAPI } from '../api'; import { getPosts, updatePost } from '../utils'; export const UpdatePost = () => { const [posts, setPosts] = useState<ResponseAPI[]>([]); useEffect(() => { getPosts().then(data => setPosts(data)); }, []); const handleUpdate = async (id: number) => { const body = `Body updated at ${Date.now()}`; const title = `Title updated at ${Date.now()}`; const userId = 1; // Or generate new one const postUpdated = await updatePost({ id, body, title, userId }); setPosts(prev => ([postUpdated, ...prev.filter(post => post.id !== id)])); }; return ( <div> <h2>Update Post</h2> <p>Click a card to update it</p> <div className='grid'> {posts.map(post => ( <div className='card' key={post.id} onClick={() => handleUpdate(post.id)}> <p>Title: <span>{post.title}</span></p> <p>Body: <span>{post.body}</span></p> <p>User: <span>{post.userId}</span></p> </div> ))} </div> </div> ); };

En src/utils/updatePost.ts, implementamos la función updatePost:

import { client, ResponseAPI } from '../api/client'; interface Props { id: number; userId: number; body: string; title: string; } export const updatePost = async ({ id, body, title, userId }: Props): Promise<ResponseAPI> => { const { data } = await client.put(`/${id}`, { body, title, userId }); return data; };

La principal diferencia aquí es que la URL de la petición PUT incluye el id del recurso a actualizar (/${id}), concatenándose a la baseURL de nuestra instancia de Axios. El segundo argumento es el cuerpo de la petición con los datos actualizados.

Eliminando Recursos: La Petición DELETE

La petición DELETE se utiliza para eliminar un recurso del servidor. Modifica src/App.tsx para usar <DeletePost />. En src/components/DeletePost.tsx, mostraremos posts que podrán ser eliminados al hacer clic:

import { getPosts, deletePost } from '../utils'; import { useEffect, useState } from 'react'; import { ResponseAPI } from '../api'; export const DeletePost = () => { const [posts, setPosts] = useState<ResponseAPI[]>([]); useEffect(() => { getPosts().then(data => setPosts(data)); }, []); const handleDelete = async (id: number) => { const isSuccess = await deletePost(id); if (isSuccess) { setPosts(prev => prev.filter(post => post.id !== id)); } }; return ( <> <h2>Delete Post</h2> <p>Click a card to delete it</p> <div className="grid"> {posts.map(post => ( <div className="card" key={post.id} onClick={() => handleDelete(post.id)}> <p>ID: <span>{post.id}</span></p> <p>Title: <span>{post.title}</span></p> <p>Body: <span>{post.body}</span></p> </div> ))} </div> </> ); };

En src/utils/deletePost.ts, la función deletePost elimina un recurso:

import { client } from '../api'; export const deletePost = async (id: number): Promise<boolean> => { const { status } = await client.delete(`/${id}`); return status === 200; };

El método client.delete() también requiere el id del recurso a eliminar en la URL. A diferencia de las otras peticiones, la propiedad data de la respuesta DELETE suele estar vacía. En su lugar, evaluamos la propiedad status. Un código de estado HTTP 200 (OK) o 204 (No Content) generalmente indica una eliminación exitosa.

Manejo de Errores Robusto con Axios

Un aspecto crucial de cualquier aplicación que interactúa con APIs es el manejo de errores. Axios simplifica esto gracias a su integración con las promesas y la disponibilidad del objeto AxiosError. Al usar async/await, podemos envolver nuestras llamadas a Axios en bloques try...catch para capturar cualquier problema que pueda surgir, ya sea un error de red, un error del servidor (como un 404 o 500) o un problema de configuración.

Dentro del bloque catch, podemos acceder al objeto de error y, si lo casteamos a AxiosError, obtendremos acceso a propiedades específicas de Axios, como err.message (un mensaje legible), err.name (el tipo de error), err.response (la respuesta HTTP recibida si el error fue del servidor), err.request (la solicitud enviada) y err.config (la configuración de la solicitud).

Aquí te mostramos cómo modificar la función getPosts para incluir un manejo de errores robusto:

import { AxiosError } from 'axios'; import { client, ResponseAPI } from '../api'; export const getPosts = async (): Promise<ResponseAPI[]> => { try { const { data } = await client.get<ResponseAPI[]>('?_limit=6'); return data; } catch (error) { const err = error as AxiosError; console.error('Error fetching posts:', err.message); if (err.response) { // El servidor respondió con un estado fuera del rango 2xx console.error('Data:', err.response.data); console.error('Status:', err.response.status); console.error('Headers:', err.response.headers); } else if (err.request) { // La solicitud fue hecha pero no se recibió respuesta console.error('No response received:', err.request); } else { // Algo más causó el error console.error('Error setting up request:', err.message); } return []; // Retorna un valor por defecto o maneja el error de otra forma } };

Este enfoque permite una depuración más efectiva y una mejor experiencia de usuario, ya que puedes manejar diferentes tipos de errores de manera específica.

Axios vs. Fetch API: Una Comparativa

Aunque Fetch API es la alternativa nativa de los navegadores, Axios ofrece ventajas significativas para el desarrollo de aplicaciones complejas. Aquí una tabla comparativa:

Como se puede apreciar, Axios proporciona una experiencia de desarrollo más completa y amigable para la mayoría de los casos de uso, especialmente cuando se trabaja con APIs RESTful.

Preguntas Frecuentes sobre Axios

¿Es Axios siempre mejor que Fetch API?

No siempre. Para peticiones muy simples donde no se necesita manejo de interceptores, transformación automática o manejo de errores avanzado, Fetch API puede ser suficiente y evita añadir una dependencia externa. Sin embargo, para la mayoría de las aplicaciones modernas que interactúan con APIs complejas, Axios ofrece una experiencia de desarrollo superior y más productiva.

¿Se puede usar Axios en Node.js?

¡Sí! Axios es una librería universal que funciona tanto en el navegador como en entornos Node.js, lo que la hace ideal para el desarrollo de aplicaciones full-stack donde la misma lógica de petición puede ser compartida.

¿Qué son los interceptores en Axios y para qué sirven?

Los interceptores son funciones que Axios permite registrar para que se ejecuten automáticamente antes de que una solicitud sea enviada o antes de que una respuesta sea manejada por tu código. Son extremadamente útiles para:

• Añadir automáticamente un token de autenticación a todas las solicitudes.
• Registrar todas las solicitudes y respuestas para depuración.
• Manejar globalmente errores comunes (ej. redirigir a la página de login si un 401 es recibido).
• Transformar datos de la solicitud o respuesta antes de que lleguen a su destino.

Los interceptores son una poderosa característica que permite implementar middleware a nivel de peticiones HTTP.

¿Cómo se cancela una petición en Axios?

Axios ofrece dos formas de cancelar peticiones: usando CancelToken (el método antiguo, aunque aún funcional) o, preferiblemente, usando la AbortController, que es la API nativa de JavaScript y es más moderna y alineada con los estándares web.

Conclusión

Axios es, sin duda, una librería muy potente y una herramienta valiosa en el arsenal de cualquier desarrollador web. Su facilidad de uso, junto con características avanzadas como axios.create() para la configuración de instancias personalizadas y el robusto manejo de errores, la convierten en una opción excelente para gestionar las interacciones HTTP en tus aplicaciones React. Hemos recorrido el camino desde la configuración inicial hasta la realización de las operaciones CRUD básicas y el manejo de errores, demostrando cómo Axios simplifica estas tareas.

Espero que este artículo te haya proporcionado una comprensión clara y práctica de cómo utilizar Axios, especialmente la utilidad de su propiedad create, para construir aplicaciones más eficientes y mantenibles. La capacidad de centralizar la configuración y reutilizar instancias es un diferenciador clave que te ahorrará tiempo y te ayudará a escribir código más limpio.

Si quieres conocer otros artículos parecidos a Axios Create: Potencia tus Peticiones HTTP en React puedes visitar la categoría Librerías.