Envío de solicitudes POST JSON con Axios

En este tutorial, veremos cómo enviar una solicitud JSON POST a una API REST usando Axios. Aprenderemos a enviar objetos JavaScript y objetos JSON serializados.

Introducción

Axios es una biblioteca de cliente HTTP basada en promesas que simplifica el envío de solicitudes HTTP asíncronas (como POST, GET y DELETE) a puntos finales REST, principalmente API.

En este artículo, aprenderemos cómo enviar solicitudes POST JSON con Axios y cómo manejar datos serializados y no serializados previamente.

Cómo enviar solicitudes POST JSON mediante Axios

La solicitud POST se utiliza para enviar datos a un punto final. Por ejemplo, si tenemos una página de registro donde los usuarios envían su información, esta información se puede enviar como JSON al punto final que especifiquemos mediante una solicitud POST JSON.

Usamos el método axios.post() para enviar una solicitud POST con Axios, que toma dos parámetros principales: la URL del punto final (url) y el objeto que representa los datos que queremos publicar (data) :

1
axios.post(url[, data[, config]])

Además de esos dos parámetros, también hay un tercero: config. Se utiliza para configurar la solicitud POST que estamos enviando, principalmente para establecer encabezados.

Envío de datos no serializados

Es importante tener en cuenta que Axios usa JSON para la publicación de datos de forma predeterminada, lo que significa que cualquier objeto que pasemos a Axios serializa automáticamente el objeto a JSON y establece el encabezado Content-Type en application/json. Ilustremos eso en el ejemplo: supongamos que estamos publicando el objeto { name: 'John Doe' }:

1
const result = await axios.post('https://testapi.org/post', { name: 'John Doe' });

Axios serializará automáticamente el objeto en formato JSON:

1
console.log(result.data.data); // '{"name":"John Doe"}'

Y como dijimos, también establecerá nuestro encabezado Content-Type en application/json:

1
console.log(result.data.headers['Content-Type']); // 'application/json;charset=utf-8'

Envío de cadena JSON serializada

Hasta ahora, hemos visto que Axios serializará automáticamente cualquier dato que le enviemos, pero en este caso, enviaremos una cadena JSON serializada como el segundo parámetro del método axios.post():

1
const usersName = JSON.stringify({ name: 'John Doe' });

Axios simplemente tratará estos datos como un cuerpo de solicitud codificado en forma en lugar de establecer el encabezado de tipo de contenido en application/json, como se muestra a continuación:

1
2
3
4
const usersName = JSON.stringify({ name: 'John Doe' });
const result = await axios.post('https://testapi.org/post', usersName);

console.log(result.data.headers['Content-Type']); // 'application/x-www-form-urlencoded',

Para resolver este problema, debemos establecer explícitamente el encabezado Content-Type en application/json. Podemos hacerlo pasando el argumento config al llamar al método axios.post():

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
const usersName = JSON.stringify({ name: 'John Doe' });
customConfig = {
    headers: {
    'Content-Type': 'application/json'
    }
};
const result = await axios.post('https://testapi.org/post', usersName, customConfig);

console.log(result.data.data); // '{"name":"John Doe"}'
console.log(result.data.headers['Content-Type']); // 'application/json',

Conclusión

En este artículo, aprendimos a enviar solicitudes POST JSON con Axios, plenamente conscientes de que estos datos pueden ser serializados o no serializados, y tratamos ambos escenarios.