📘 Ejercicios de peticiones `fetch` GET y POST¶

Herramientas¶

La simple¶

Para las pruebas podéis usar curl:

GET: curl "URL" o curl "URL?arg=val&arg2=val"
POST:

curl -H "Content-Type: application/json" --data “{""arg"":""valor"", ""arg2"": ""valor""}“ URL

# o también cargando el archivo "body.json" 
curl -H "Content-Type: application/json" --data "@body.json" URL

Opciones: + -v da respuesta más verbosa (incluídas cabeceras) + -I ofrece sólo las cabeceras de respuesta

La bonita¶

Exiten muchas aplicaciones gráficas para la peticiones http/https:

Web ReqBin
Plugin para VS thunderclient
Postman
Cartero (de Makigas) o de Daniel Rodriguez

GET¶

Ejercicio 1: Petición GET libre de carga¶

Objetivo: aprender a realizar peticiones get simples
Enunciado:
- Crea un formulario que contenga:
  - el campo URL destino
  - un botón enviar.
- El programa deberá realizar una petición GET al servidor y capturar la respuesta.
- La aplicación deberá mostrar de forma elegante la respuesta
Conceptos clave: captura de formulario, fetch + async/await, procesado de respuesta.
Nivel: ★☆☆☆☆
Resultado: html + js con estructura de aula (globales, capturas, acciones, eventos y auxliares).
Extra: la respuesta tiene un formato desconocido.

Ejercicio 2: Petición de usuario por id¶

Objetivo: aprender a realizar peticiones get simples
Enunciado:
- Crea un formulario que contenga un campo para el número de usuario y el botón enviar.
- El programa deberá comunicar con el servidor retornando el usuario indicado.
- La aplicación deberá mostrar de forma elegante los datos del mismo
Conceptos clave: captura de formulario, fetch + async/await, procesado de respuesta.
Nivel: ★★☆☆☆
Resultado: html + js con estructura de aula (globales, capturas, acciones, eventos y auxliares).
Extra: el usuario tendrá campos desconocidos.

Ejercicio 3: Petición de productos por tipo¶

Objetivo: aprender a realizar peticiones get simples con respuestas múltiples.
Enunciado:
- Crea un formulario que contenga un campo para el tipo de producto. Debe ser un selector que permita ‘kbd’ (teclados), ‘mau’ (ratónes), ‘mon’ (monitores) y ‘all’ (todos), y el botón enviar.
- El programa deberá comunicar con el servidor retornando todos los productos del tipo indicado.
- La aplicación deberá mostrar de forma elegante los datos del mismo
Conceptos clave: captura de formulario, fetch + async/await, procesado de respuesta y generación de listados.
Nivel: ★★★☆☆
Resultado: html + js con estructura de aula (globales, capturas, acciones, eventos y auxliares).
Extra: la respuesta tendrá campos desconocidos pero constantes.

POST¶

Ejercicio 6: Petición simple post¶

Objetivo: aprender a realizar peticiones POST simples con respuesta simple.
Enunciado:
- Crea un formulario que contenga:
  - el campo URL destino
  - un campo USUARIO
  - un botón enviar.
- El programa deberá realizar una petición POST al servidor y capturar la respuesta.
- La aplicación deberá mostrar de forma elegante la respuesta
Conceptos clave: captura de formulario, fetch + async/await, procesado de respuesta.
Nivel: ★★★☆☆
Resultado: html + js con estructura de aula (globales, capturas, acciones, eventos y auxliares).
Extra: la respuesta tiene un formato desconocido.

curl -X POST -H "Content-Type: application/json" --data "@body.json" "https://URL/ejercicio.php"

📘 Ejercicios de peticiones fetch GET y POST¶