Cómo modificar una solicitud con transformRequest en Axios
¿Qué es y cómo funciona transformRequest en Axios?
La propiedad transformRequest de Axios te permite interceptar y modificar los datos de la solicitud antes de que se envíen. Funciona de manera similar a transformResponse, pero en lugar de trabajar con la respuesta del servidor, se utiliza para manipular los datos que salen de la aplicación. Este método es ideal para tareas como serializar datos, cambiar estructuras de objetos, o configurar encabezados adicionales de forma dinámica.
Puedes definir esta función tanto a nivel global como en una solicitud específica.
Ejemplo de uso básico
const axios = require('axios');
axios({
method: 'post',
url: 'https://api.ejemplo.com/enviar',
data: {
nombre: 'Juan',
edad: 30
},
transformRequest: [(data) => {
// Transformar el objeto de datos en una cadena JSON
data.timestamp = new Date().toISOString();
return JSON.stringify(data);
}],
headers: {
'Content-Type': 'application/json'
}
})
.then(response => {
console.log('Respuesta del servidor:', response.data);
})
.catch(error => {
console.log('Error:', error);
});
En este ejemplo, se agrega un campo timestamp a los datos antes de enviarlos y luego se transforman en formato JSON usando transformRequest.
Ejemplos adicionales
Modificación global de las solicitudes
Si deseas aplicar una transformación a todas las solicitudes de una instancia de Axios, puedes configurar transformRequest globalmente:
const instance = axios.create({
transformRequest: [(data) => {
// Convertir los datos a una cadena URL-encoded
const params = new URLSearchParams();
for (const key in data) {
params.append(key, data[key]);
}
return params.toString();
}],
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
});Aplicar múltiples transformaciones
Al igual que con transformResponse, puedes aplicar varias transformaciones secuenciales a los datos de la solicitud:
axios.post('/crearUsuario', {
nombre: 'María',
edad: 25
}, {
transformRequest: [(data) => {
// Primera transformación: serializar a JSON
return JSON.stringify(data);
}, (data) => {
// Segunda transformación: agregar metadatos
return `${data} - enviado el ${new Date().toLocaleString()}`;
}]
})
.then(response => {
console.log('Usuario creado:', response.data);
})
.catch(error => {
console.log('Error:', error);
});En este caso, primero los datos se serializan en formato JSON y luego se les añade una cadena adicional con la fecha y hora actual.
Referencia oficial
Puedes obtener más detalles sobre transformRequest en la documentación oficial de Axios.
Jorge García
Fullstack developer