En este post te mostraré, de manera simple, cómo enviar datos codificados como JSON desde Angular a un servidor con node.
Vamos a usar express en el lado del servidor; y del lado del cliente simplemente fetch.
En el lado del servidor necesitamos usar el middleware de JSON que convertirá la petición a datos JSON. Comenzamos importando a express e instanciando nuestra app:
const express = require("express");
const app = express();
Luego usamos el middleware.
app.use(express.json())
Con eso, cada que express detecte que una petición tiene Content-Type en application/json dentro de un encabezado, intentará interpretar los datos JSON.
Ahora desde Angular simplemente usamos lo siguiente:
const datos = {
nombre: "Luis Cabrera Benito",
web: "parzibyte.me",
};
const respuestaRaw = await fetch("http://sitio.com", {
body: JSON.stringify(datos), // <-- Aquí van los datos
headers: {
"Content-Type": "application/json", // <-- Importante el encabezado
},
method: "POST",
});
const jsonDecodificado = await respuestaRaw.json();
console.log(jsonDecodificado);
Como ves usamos fetch, enviamos el encabezado y además los datos codificados como JSON. Si quieres puedes usar await
y si no, simplemente promesas.
Nota: si quieres usar await
asegúrate de declarar tu función (dentro del componente de Angular) async
; así:
public async tu_función_en_angular(){
// Aquí el código
}
Finalmente veamos cómo recibimos los datos con Node. Como puedes ver anteriormente enviamos un payload con nombre y web. Ahora podemos leerlos dentro de una configuración de rutas así:
app.post("/usuario", async (req, res) => {
// Dentro de req.body tenemos a todo el objeto. Podemos acceder a las claves del mismo como
// lo enviamos desde el cliente ;)
const nombre = req.body.nombre;
const web = req.body.web;
// Aquí hacer algo con las dos variables y responder la petición
});
Preparamos a express para que lea JSON. Luego de eso podemos leer los datos enviados desde el cliente a través de req.body
. Recuerda que req
en este caso es la primer variable que se recibe en el callback cuando se configura una ruta, y representa la petición.
Después en el lado del cliente usamos fetch
, establecemos el encabezado para indicar que enviamos un JSON y enviamos en el body
el JSON codificado con JSON.stringify.
Este ejemplo funciona perfectamente para Angular, no importa si usas JavaScript o TypeScript.
Con esto puedes enviar todo tipo de datos complejos: objetos, simples variables, arreglos de objetos, objetos con arreglos, etcétera.
Hoy te voy a presentar un creador de credenciales que acabo de programar y que…
Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…
En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…
En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…
Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…
En este artículo te voy a enseñar cómo usar un "top level await" esperando a…
Esta web usa cookies.