Axios

img

temas

¿Qué es Axios?

Axios es una librería basada en Promesas para realizar solicitudes HTTP desde el navegador o Node.js.
A diferencia de usar directamente fetch (nativo en los navegadores), Axios proporciona una interfaz más amigable, concisa y robusta, con soporte integrado para:

1. ¿Para qué se usa?

Axios se utiliza para comunicar aplicaciones frontend con APIs o para hacer peticiones desde servidores Node.js a otros servicios externos.
Se aplica especialmente en:

2. ¿Qué puedo construir con Axios?

Con Axios puedes construir:

3. ¿Cuándo es más conveniente usarlo?

Es recomendable usar Axios cuando:

Buenas prácticas recomendadas

Resumen rápido

✅ Fortalezas principales:

⚠️ Debilidades principales:

🛠️ Cuándo usarlo:

🚫 Cuándo evitarlo:

Temas

Conceptos relacionados

Antes o junto a Axios es recomendable conocer algunos conceptos clave que te ayudarán a sacarle mayor provecho:

HTTP y sus métodos:

GET, POST, PUT, PATCH, DELETE.
Axios simplifica su uso, pero es importante entender qué hace cada uno.

Promesas y async/await:

Axios trabaja con promesas, por lo que es fundamental comprender cómo manejarlas.

JSON (JavaScript Object Notation):

Formato estándar de intercambio de datos entre cliente y servidor.

APIs RESTful:

Diseño de servicios web que utilizan métodos HTTP para la comunicación entre aplicaciones.

Códigos de estado HTTP:

(200 éxito, 404 no encontrado, 500 error interno, etc.) para manejar respuestas adecuadas.

Headers HTTP:

Información adicional enviada en las peticiones y respuestas (ej. autenticación, tipo de contenido).

Manejo de errores en peticiones:

Cómo capturar y tratar excepciones en caso de fallas de red o respuestas inválidas.

Cancelación de solicitudes:

Evitar llamadas innecesarias cuando el usuario cambia de vista o componente.

🔼 temas

Herramientas recomendadas

Para trabajar de manera eficiente y profesional con Axios, estas son herramientas y recursos clave:

1. axios.create():

Permite crear una instancia personalizada con configuraciones predeterminadas como baseURL o headers.

const api = axios.create({
  baseURL: "https://api.miservicio.com",
  timeout: 5000,
  headers: { Authorization: "Bearer token123" },
});

2. Interceptors (Interceptors de Axios):

Middleware para modificar peticiones o respuestas antes de que lleguen al código principal. Útil para tokens de autenticación, logging o manejo centralizado de errores.

api.interceptors.request.use((config) => {
  console.log("Petición enviada:", config.url);
  return config;
});

3. CancelToken / AbortController:

Mecanismo para cancelar solicitudes en curso, muy útil en aplicaciones con búsquedas en vivo o componentes que se desmontan.

4. Configuración Global (defaults):

Definir headers, baseURL y timeouts de forma global para no repetir en cada llamada.

axios.defaults.baseURL = "https://api.global.com";
axios.defaults.headers.common["Authorization"] = "Bearer globalToken";

5. Manejo de errores con try/catch y error.response:

Permite capturar respuestas erróneas y actuar según el estado devuelto.

6. Integración con frameworks modernos:

7. Documentación oficial:

https://axios-http.com
Recurso clave para aprender funciones avanzadas, configuraciones y casos de uso.

🔼 temas

Comandos

1. GET

Obtener datos

axios
  .get("/users")
  .then((res) => console.log(res.data))
  .catch((err) => console.error(err));

2. POST

Enviar datos

axios
  .post("/users", { name: "Juan", age: 25 })
  .then((res) => console.log(res.data));

3. PUT

Reemplazar un recurso

axios
  .put("/users/1", { name: "Pedro", age: 30 })
  .then((res) => console.log(res.data));

4. PATCH

Actualizar parcialmente

axios.patch("/users/1", { age: 31 }).then((res) => console.log(res.data));

5. DELETE

Eliminar un recurso

axios.delete("/users/1").then((res) => console.log("Usuario eliminado"));

6. Configuración con parámetros

axios
  .get("/users", { params: { page: 2, limit: 5 } })
  .then((res) => console.log(res.data));

7. Headers personalizados

axios.get("/profile", {
  headers: { Authorization: "Bearer token123" },
});

8. Instancia personalizada (axios.create)

const api = axios.create({ baseURL: "https://api.miapp.com" });
api.get("/status").then((res) => console.log(res.data));

9. Interceptor de peticiones

axios.interceptors.request.use((config) => {
  config.headers["Authorization"] = "Bearer token123";
  return config;
});

10. Manejo de errores

try {
  const res = await axios.get("/users/99");
} catch (err) {
  console.error(err.response.status); // Ej: 404
}

🔼 temas

Conceptos Claves

🟢 Básico

1. ¿Qué es Axios y para qué se utiliza?

Axios es una librería basada en Promesas para realizar solicitudes HTTP desde el navegador o Node.js. Se usa para consumir APIs REST, enviar y recibir datos en formatos como JSON.

2. ¿En qué se diferencia Axios de fetch nativo?

3. ¿Cómo se realiza una petición GET básica con Axios?

axios
  .get("/users")
  .then((res) => console.log(res.data))
  .catch((err) => console.error(err));

4. ¿Cómo se envía información con un POST en Axios?

axios
  .post("/users", { name: "Ana", age: 28 })
  .then((res) => console.log(res.data));

5. ¿Qué tipo de datos devuelve Axios por defecto en una respuesta?

Devuelve un objeto de respuesta con varias propiedades:

🟡 Intermedio

6. ¿Qué son los interceptores en Axios?

Son funciones que se ejecutan antes de enviar una petición o recibir una respuesta. Se usan para agregar tokens de autenticación, logs, manejo de errores global o modificar datos.

axios.interceptors.request.use((config) => {
  config.headers["Authorization"] = "Bearer token123";
  return config;
});

7. ¿Cómo se configuran headers personalizados en Axios?

axios.get("/profile", {
  headers: { Authorization: "Bearer token123" },
});

8. ¿Qué ventaja ofrece `axios.create(

Permite crear una instancia personalizada con configuración global (baseURL, headers, timeout), evitando repetir código en cada solicitud.

9. ¿Cómo maneja Axios los errores?

Con try/catch o .catch(). El error incluye información útil como error.response, error.request y error.message.

try {
  const res = await axios.get("/no-existe");
} catch (err) {
  console.error(err.response.status); // 404
}

10. ¿Cómo enviar parámetros en una petición GET?

axios.get("/users", { params: { page: 2, limit: 10 } });

🔴 Avanzado

11. ¿Cómo cancelar una petición en Axios?

Mediante AbortController (versión moderna) o CancelToken (antigua).

const controller = new AbortController();
axios.get("/search", { signal: controller.signal });
// Cancelar
controller.abort();

12. ¿Cómo se integra Axios en un proyecto con React?

Se recomienda usarlo dentro de useEffect o crear servicios externos. Ejemplo:

useEffect(() => {
  axios.get("/users").then((res) => setUsers(res.data));
}, []);

13. ¿Qué es el timeout en Axios y cómo configurarlo?

Es el tiempo máximo de espera para una respuesta antes de cancelar la petición.

axios.get("/slow", { timeout: 5000 });

14. ¿Cómo manejar múltiples peticiones en paralelo con Axios?

Usando Promise.all.

const [res1, res2] = await Promise.all([
  axios.get("/users"),
  axios.get("/posts"),
]);

15. ¿Qué buenas prácticas se recomiendan al usar Axios en proyectos grandes?

🔼 temas