miércoles 23 octubre 2024

Cómo usar interceptores en Axios

¿Qué son los interceptores en Axios y cómo funcionan?

Axios permite configurar dos tipos de interceptores:

1. Interceptores de solicitud: Modifican o analizan una solicitud antes de que sea enviada al servidor.

2. Interceptores de respuesta: Permiten modificar o manejar las respuestas del servidor antes de que lleguen al código que las consume.

Ambos interceptores pueden ser útiles para tareas como agregar tokens de autenticación a las cabeceras de todas las solicitudes o para manejar errores globales de manera uniforme.

Ejemplo básico de interceptores de solicitud

Un interceptor de solicitud te permite modificar la configuración de la solicitud antes de que sea enviada. Por ejemplo, puedes agregar un token de autenticación automáticamente a cada solicitud:

const axios = require('axios');

// Interceptor de solicitudes
axios.interceptors.request.use(config => {
  // Modificar la solicitud antes de enviarla
  const token = 'mi-token-de-autenticacion';
  if (token) {
    config.headers['Authorization'] = `Bearer ${token}`;
  }
  return config;
}, error => {
  // Manejar el error de la solicitud
  return Promise.reject(error);
});

// Realizar una solicitud GET
axios.get('https://api.ejemplo.com/datos')
  .then(response => {
    console.log('Datos recibidos:', response.data);
  })
  .catch(error => {
    console.error('Error en la solicitud:', error);
  });

En este ejemplo, el interceptor agrega automáticamente un encabezado de autorización con un token a todas las solicitudes salientes.

Ejemplo básico de interceptores de respuesta

Los interceptores de respuesta permiten analizar y modificar las respuestas antes de que sean recibidas por el código de la aplicación. Son útiles para tareas como el manejo centralizado de errores:

axios.interceptors.response.use(response => {
  // Modificar la respuesta antes de devolverla
  return response;
}, error => {
  // Manejar errores de la respuesta
  if (error.response && error.response.status === 401) {
    console.log('No autorizado. Redirigiendo al login...');
    // Aquí podrías redirigir al login, por ejemplo.
  } else if (error.response && error.response.status === 500) {
    console.log('Error interno del servidor.');
  }
  return Promise.reject(error);
});

// Realizar una solicitud GET
axios.get('https://api.ejemplo.com/datos')
  .then(response => {
    console.log('Datos recibidos:', response.data);
  })
  .catch(error => {
    console.error('Error en la solicitud:', error);
  });

En este caso, el interceptor maneja errores HTTP de manera global, mostrando un mensaje específico si la solicitud falla por errores 401 (no autorizado) o 500 (error interno del servidor).

Ejemplos adicionales

Interceptores de solicitud y respuesta combinados

Puedes configurar tanto interceptores de solicitud como de respuesta para manejar todas las etapas del ciclo de vida de una solicitud:

// Interceptor de solicitud
axios.interceptors.request.use(config => {
  console.log('Solicitando:', config.url);
  return config;
}, error => {
  console.log('Error en la solicitud:', error);
  return Promise.reject(error);
});

// Interceptor de respuesta
axios.interceptors.response.use(response => {
  console.log('Respuesta recibida:', response.data);
  return response;
}, error => {
  console.log('Error en la respuesta:', error.response.status);
  return Promise.reject(error);
});

Eliminar interceptores

Si ya no necesitas un interceptor, puedes eliminarlo usando el ID que devuelve use:

const interceptorId = axios.interceptors.request.use(config => {
  console.log('Solicitud interceptada');
  return config;
});

// Eliminar el interceptor
axios.interceptors.request.eject(interceptorId);

Esto es útil cuando quieres aplicar un interceptor solo temporalmente y luego removerlo.

Referencia oficial

Puedes consultar más detalles en la documentación oficial de Axios.

Etiquetas:

javascript

Creado por:

Jorge García

Fullstack developer