1. Iniciamos al ejecutar código en el cliente

index.html

const resp =
 await fetch("servicio.php")
if (resp.ok) {
 const texto =
  await resp.text()
 alert(texto)
} else {
 throw new Error(
  resp.statusText)
}

2. Se invoca el servicio en el servidor

index.html

const resp =
 await fetch("servicio.php")
if (resp.ok) {
 const texto =
  await resp.text()
 alert(texto)
} else {
 throw new Error(
  resp.statusText)
}

Ejecuta fetch y envía request (solicitud).

Request

URL: servicio.php
Method: GET

servicio.php

<?php

echo "Hola";

Despierta y recibe request.

3. El servicio procesa la request y genera la response

index.html

const resp =
 await fetch("servicio.php")
if (resp.ok) {
 const texto =
  await resp.text()
 alert(texto)
} else {
 throw new Error(
  resp.statusText)
}

Hace wait esperando response.

servicio.php

<?php

echo "Hola";

Procesa la request y genera
la response (respuesta).

Response

code: 200
body: Hola

El code (o código) 200
indica que terminó
con éxito.

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

index.html

const resp =
 await fetch("servicio.php")
if (resp.ok) {
 const texto =
  await resp.text()
 alert(texto)
} else {
 throw new Error(
  resp.statusText)
}

Despierta y recibe response.

Response

code: 200
body: Hola

Memoria

resp

ok: true
text: Hola

resp tiene lo mismo
que la response,
pero en un objeto
de JavaScript.

servicio.php

<?php

echo "Hola";

Devuelve response y se duerme.

5. Verifica si la conexión terminó con éxito

index.html

const resp =
 await fetch("servicio.php")
if (resp.ok) {
 const texto =
  await resp.text()
 alert(texto)
} else {
 throw new Error(
  resp.statusText)
}

Memoria

resp

ok: true
text: Hola

6. Como la conexión terminó con éxito, recupera el texto de response

index.html

const resp =
 await fetch("servicio.php")
if (resp.ok) {
 const texto =
  await resp.text()
 alert(texto)
} else {
 throw new Error(
  resp.statusText)
}

Memoria

resp

ok: true
text: Hola

texto

Hola

El texto recuperado
queda en la
constante texto.

7. Muestra el texto en un alert

index.html

const resp =
 await fetch("servicio.php")
if (resp.ok) {
 const texto =
  await resp.text()
 alert(texto)
} else {
 throw new Error(
  resp.statusText)
}

Memoria

resp

ok: true
text: Hola

texto

Hola

Alert

Hola

8. Al cerrar el alert, termina el evento

index.html

const resp =
 await fetch("servicio.php")
if (resp.ok) {
 const texto =
  await resp.text()
 alert(texto)
} else {
 throw new Error(
  resp.statusText)
}

1	<!DOCTYPE html>
2	<html lang="es">
3
4	<head>
5
6	<meta charset="UTF-8">
7	<meta name="viewport" content="width=device-width">
8
9	<title>Ejemplo de servicio</title>
10
11	</head>
12
13	<body>
14	<h1>Ejemplo de servicio</h1>
15
16	<button onclick="ejecuta()">
17	Ejecuta
18	</button>
19
20	<script>
21
22	async function ejecuta() {
23	try {
24	// Se conecta a servicio.php y recibe su respuesta.
25	const resp =
26	await fetch("servicio.php")
27	if (resp.ok) {
28	const texto =
29	await resp.text()
30	alert(texto)
31	} else {
32	throw new Error(
33	resp.statusText)
34	}
35	} catch (error) {
36	console.error(error)
37	alert(error.message)
38	}
39	}
40
41	</script>
42
43	</body>
44
45	</html>

4. Ejemplo de servicio

A. Introducción

B. Diagrama de despliegue

C. Funcionamiento

1. Iniciamos al ejecutar código en el cliente

index.html

2. Se invoca el servicio en el servidor

index.html

Request

servicio.php

3. El servicio procesa la request y genera la response

index.html

servicio.php

Response

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

index.html

Response

Memoria

servicio.php

5. Verifica si la conexión terminó con éxito

index.html

Memoria

6. Como la conexión terminó con éxito, recupera el texto de response

index.html

Memoria

7. Muestra el texto en un alert

index.html

Memoria

Alert

8. Al cerrar el alert, termina el evento

index.html

D. Hazlo funcionar

E. Archivos

F. index.html

G. servicio.php

H. Resumen