| ... | ... | @@ -411,3 +411,37 @@ Cuando el usuario escriba un valor y pulse el botón, se deben mostrar **solo lo |
|
|
|
```
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
¡Perfecto! Vamos a crear un ejercicio **nuevo**, siguiendo el mismo estilo que los anteriores, pero esta vez usando **`async/await`** para que los alumnos vean cómo manejar operaciones asincrónicas de manera sencilla.
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
## Ejercicio 13: Cargar datos simulando una petición con `async/await`
|
|
|
|
|
|
|
|
### **Enunciado**
|
|
|
|
|
|
|
|
Crea una página que tenga un botón **“Cargar recursos”** y una lista `<ul>`.
|
|
|
|
Al pulsar el botón, se debe **simular una petición a un servidor** que devuelve los recursos después de 2 segundos.
|
|
|
|
Usa `async/await` para manejar la operación y luego muestra los recursos en la lista.
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
### **HTML base**
|
|
|
|
|
|
|
|
```html
|
|
|
|
<!DOCTYPE html>
|
|
|
|
<html lang="es">
|
|
|
|
<head>
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
<title>Ejercicio 13 - Async/Await</title>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
|
|
|
|
<h1>Recursos cargados de manera asincrónica</h1>
|
|
|
|
<button id="loadButton">Cargar recursos</button>
|
|
|
|
<ul id="recursosList"></ul>
|
|
|
|
|
|
|
|
<script src="main.js"></script>
|
|
|
|
</body>
|
|
|
|
</html>
|
|
|
|
``` |
