C. Escenario con datos incorrectos

Versión para imprimir.

1. El usuario activa la forma sin capturar datos

Forma

2. Se activa el código del evento submit

Forma

index.html

try {
 const respuesta =
  await submitForm(
   "srv/valida.php", event)
 alert(respuesta.body)
} catch (error) {
 muestraError(error)
}

3. Se invoca el servicio, incluyendo los datos de la forma

Forma

index.html

try {
 const respuesta =
  await submitForm(
   "srv/valida.php", event)
 alert(respuesta.body)
} catch (error) {
 muestraError(error)
}

Request

URL
srv/valida.php
Method
POST
body
saludo
vacío
nombre
vacío

srv/valida.php

$saludo = leeTexto("saludo");
$nombre = leeTexto("nombre");
if (
 $saludo === null
 || $saludo === ""
) {
 throw new ProblemDetails(
  status: ProblemDetails::BadRequest,
  type: "/error/faltasaludo.html",
  title: "Falta el saludo.",
 );
}
if (
 $nombre === null
 || $nombre === ""
) {
 throw new ProblemDetails(
  status: ProblemDetails::BadRequest,
  type: "/error/faltanombre.html",
  title: "Falta el nombre.",
 );
}
$resultado =
 "{$saludo} {$nombre}.";
return $resultado;

Despierta y recibe request.

4. El servicio lee los datos

index.html

try {
 const respuesta =
  await submitForm(
   "srv/valida.php", event)
 alert(respuesta.body)
} catch (error) {
 muestraError(error)
}

Hace wait esperando response.

srv/valida.php

$saludo = leeTexto("saludo");
$nombre = leeTexto("nombre");
if (
 $saludo === null
 || $saludo === ""
) {
 throw new ProblemDetails(
  status: ProblemDetails::BadRequest,
  type: "/error/faltasaludo.html",
  title: "Falta el saludo.",
 );
}
if (
 $nombre === null
 || $nombre === ""
) {
 throw new ProblemDetails(
  status: ProblemDetails::BadRequest,
  type: "/error/faltanombre.html",
  title: "Falta el nombre.",
 );
}
$resultado =
 "{$saludo} {$nombre}.";
return $resultado;

Request

URL
srv/valida.php
Method
POST
body
saludo
vacío
nombre
vacío

Memoria (Servidor)

$saludo
""
$nombre
""

5. El servicio comprueba que el saludo sea válido

index.html

try {
 const respuesta =
  await submitForm(
   "srv/valida.php", event)
 alert(respuesta.body)
} catch (error) {
 muestraError(error)
}

Hace wait esperando response.

srv/valida.php

$saludo = leeTexto("saludo");
$nombre = leeTexto("nombre");
if (
 $saludo === null
 || $saludo === ""
) {
 throw new ProblemDetails(
  status: ProblemDetails::BadRequest,
  type: "/error/faltasaludo.html",
  title: "Falta el saludo.",
 );
}
if (
 $nombre === null
 || $nombre === ""
) {
 throw new ProblemDetails(
  status: ProblemDetails::BadRequest,
  type: "/error/faltanombre.html",
  title: "Falta el nombre.",
 );
}
$resultado =
 "{$saludo} {$nombre}.";
return $resultado;

Memoria (Servidor)

$saludo
""
$nombre
""

6. Como el saludo no es válido, aborta y genera la response

index.html

try {
 const respuesta =
  await submitForm(
   "srv/valida.php", event)
 alert(respuesta.body)
} catch (error) {
 muestraError(error)
}

Hace wait esperando response.

srv/valida.php

$saludo = leeTexto("saludo");
$nombre = leeTexto("nombre");
if (
 $saludo === null
 || $saludo === ""
) {
 throw new ProblemDetails(
  status: ProblemDetails::BadRequest,
  type: "/error/faltasaludo.html",
  title: "Falta el saludo.",
 );
}
if (
 $nombre === null
 || $nombre === ""
) {
 throw new ProblemDetails(
  status: ProblemDetails::BadRequest,
  type: "/error/faltanombre.html",
  title: "Falta el nombre.",
 );
}
$resultado =
 "{$saludo} {$nombre}.";
return $resultado;

Response

code
400
body
{
"type": "/error/faltasaludo.html",
"title": "Falta el saludo."
}

7. El servicio devuelve la response, que es recibida en el cliente

index.html

try {
 const respuesta =
  await submitForm(
   "srv/valida.php", event)
 alert(respuesta.body)
} catch (error) {
 muestraError(error)
}

Despierta y recibe response.

Response

code
400
body
{
"type": "/error/faltasaludo.html",
"title": "Falta el saludo."
}

srv/valida.php

$saludo = leeTexto("saludo");
$nombre = leeTexto("nombre");
if (
 $saludo === null
 || $saludo === ""
) {
 throw new ProblemDetails(
  status: ProblemDetails::BadRequest,
  type: "/error/faltasaludo.html",
  title: "Falta el saludo.",
 );
}
if (
 $nombre === null
 || $nombre === ""
) {
 throw new ProblemDetails(
  status: ProblemDetails::BadRequest,
  type: "/error/faltanombre.html",
  title: "Falta el nombre.",
 );
}
$resultado =
 "{$saludo} {$nombre}.";
return $resultado;

Devuelve response y se duerme.

8. Como hay error, lanza una excepción que atrapa catch

index.html

try {
 const respuesta =
  await submitForm(
   "srv/valida.php", event)
 alert(respuesta.body)
} catch (error) {
 muestraError(error)
}

Response

code
400
body
{
"type": "/error/faltasaludo.html",
"title": "Falta el saludo."
}

Memoria

error
ProblemDetails
status
400
type
"/error/faltasaludo.html"
title
"Falta el saludo."

9. Muestra los detalles de la excepción en la consola y en un alert

index.html

try {
 const respuesta =
  await submitForm(
   "srv/valida.php", event)
 alert(respuesta.body)
} catch (error) {
 muestraError(error)
}

Memoria

error
ProblemDetails
status
400
type
"/error/faltasaludo.html"
title
"Falta el saludo."

Alert

Falta el saludo

Código 400 /error/faltasaludo.html

Consola

Falta el saludo

Código: 400 /error/faltasaludo.html
Error: Falta el saludo
  at invocaServicio (invocaServicio.js:48:10)
  at async procesaForma ((índice):52:6)

10. Al cerrar el alert, termina el evento

index.html

try {
 const respuesta =
  await submitForm(
   "srv/valida.php", event)
 alert(respuesta.body)
} catch (error) {
 muestraError(error)
}

Consola

Falta el saludo

Código: 400 /error/faltasaludo.html
Error: Falta el saludo
  at invocaServicio (invocaServicio.js:48:10)
  at async procesaForma ((índice):52:6)