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.

Preparando servidor

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:

Luego usamos el middleware.

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.

Haciendo petición

Ahora desde Angular simplemente usamos lo siguiente:

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í:

Leyendo datos en el servidor

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í:

En resumen

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.

Relacionado:  Ejemplo de formulario con Angular

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.


Estoy disponible para trabajar en tu proyecto o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.
Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Únete a otros 577 suscriptores


parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

0 Comments

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

A %d blogueros les gusta esto: