En este artículo, analizaremos la realización de requests POST con datos de formulario utilizando la biblioteca Axios. Axios es un cliente HTTP basado en Promise que se puede usar tanto para la web como para el desarrollo de Node.JS. Sin embargo, en este artículo, nos referiremos estrictamente al uso de Axios por parte del cliente.
Para comenzar, necesitamos agregar axios a nuestro desarrollo usando un enlace CDN:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"> </script>
Para poder extraer datos de nuestro formulario, vamos a utilizar el método FormData(). El método formdata convierte la entrada de datos en el formulario en forma de pares clave-valor para crear un objeto multiparte/datos de formulario.
HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src= "https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js" crossorigin="anonymous"> </script> <title>Document</title> </head> <body> <h3 style="color:green; font-size:25px;"> Geeks For Geeks </h3> <form> <input name="first-name"/><br> <input name="last-name"/><br> <input name="address"/><br> <button type="submit">Submit</button> </form> </body> </html>
Producción:
Sintaxis de la solicitud de publicación de Axios
Hay dos formas de realizar una solicitud de publicación de Axios:
- Solicitud de publicación estándar:
axios.post(url, data).then(callbackFn()).catch(callbackFn(err))
url : La URL de solicitud para HTTP POST.
data: un objeto que contiene los datos POST
callbackFn(): funciones de devolución de llamada para manejar la promesa.
axios({
método : ‘post’,
url : url,
datos :
encabezados de datos : encabezados
}).then(callbackFn()).catch(callbackFn())
método: especifica el método HTTP
datos: un objeto que contiene los datos POST.
encabezados (opcional): un objeto para especificar los encabezados asociados con la solicitud.
Publicar solicitud con un objeto de configuración
Código Javascript para enviar datos de formulario a servidores:
window.addEventListener('load', ()=>{
const form = document.querySelector('form');
form.addEventListener('submit', (e)=>{
//to prevent reload
e.preventDefault();
//creates a multipart/form-data object
let data = new FormData(form);
axios({
method : 'post',
url : '/',
data : data,
})
.then((res)=>{
console.log(res);
})
.catch((err) => {throw err});
});
});
Prueba de la solicitud de Axios con una API de descanso simulada:
Código de front-end:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1.0" />
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"
integrity=
"sha512-VZ6m0F78+yo3sbu48gElK4irv2dzPoep8oo9LEjxviigcnnnNvnTOJRSrIhuFk68FMLOpiNz+T77nNY89rnWDg=="
crossorigin="anonymous"></script>
<title>Document</title>
</head>
<body>
<h3 style="color: green; font-size: 25px;">
Geeks For Geeks
</h3>
<form>
<input name="first-name" /><br />
<input name="last-name" /><br />
<input name="address" /><br />
<button type="submit">Submit</button>
</form>
<script type="text/javascript">
window.addEventListener("load", () => {
const form = document.querySelector("form");
form.addEventListener("submit", (e) => {
e.preventDefault();
let data = new FormData(form);
console.log(data);
axios({
method: "post",
url: "/",
data: data,
})
.then((res) => {
console.log(res);
})
.catch((err) => {
throw err;
});
});
});
</script>
</body>
</html>
Código para la API REST simulada basada en Node.js:
const express = require('express');
const formidable = require('express-formidable');
const app = express();
app.use(express.static(__dirname+'/index.html'));
app.use(formidable());
app.get('/', (req, res)=>{
res.sendFile(__dirname+'/index.html');
});
app.post('/', (req, res)=>{
console.log(JSON.stringify(req.fields));
});
app.listen('3000', ()=>{
console.log('listening to port');
});
Datos de solicitud de muestra:
Salida en consola:
{"first-name":"Geeks", "last-name":"Geeks", "address":"Noida"}
Publicación traducida automáticamente
Artículo escrito por tirtharajsengupta y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA