Pedir en el bar y esperar
En el bar pides un café y esperas. Mientras, el camarero atiende a otros. Cuando está listo, te llama.
Una página hace lo mismo con los datos. Los pide a un servidor, sigue funcionando y los enseña cuando llegan.
Palabras clave
| Palabra | Qué significa | Ejemplo |
|---|---|---|
| API | Una dirección de un servidor que te da datos si se los pides. | /api/menu |
| fetch | La orden de JavaScript para pedir datos a una dirección. | fetch('/api/menu') |
| Respuesta | Lo que devuelve el servidor. Tiene un estado y unos datos. | response.status |
| Promesa | Algo que no está listo todavía pero lo estará más tarde. | Promise |
| async y await | Await espera a una promesa. Solo se puede usar dentro de una función async. | await fetch(url) |
| Estado | Un número que dice cómo fue la petición. | 200 |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
Esperar sin pararse
Pedir datos por internet tarda. Un programa no puede quedarse congelado, así que JavaScript usa promesas.
Con await esperas a que una promesa termine, y solo dentro de esa función. Todo lo demás sigue en marcha.
Pruébalo: esperar un café
// Una promesa es algo que terminará más tarde.
function waitFor(milliseconds) {
return new Promise(function (resolve) {
setTimeout(resolve, milliseconds);
});
}
async function run() {
console.log('Pido el café...');
await waitFor(1000);
console.log('Ya está el café.');
}
run();
console.log('Mientras tanto, sigo con lo mío.');
La llamada de verdad
Así se pide un menú a un servidor. Primero fetch da la respuesta. Después response.json() lee los datos, y también tarda, por eso lleva su await.
Este bloque no se ejecuta. Aquí no hay servidor al que llamar.
Una llamada con fetch
// Esto es lo que escribirías con un servidor de verdad.
// Aquí no se ejecuta, porque no hay servidor al que llamar.
async function loadMenu() {
const response = await fetch('https://api.ejemplo.es/menu');
const menu = await response.json();
console.log(menu);
}
loadMenu();
Pruébalo: un menú de un servidor de mentira
<h1>Menú del día</h1>
<p id="state"></p>
<ul id="menu"></ul>
Ejemplo resuelto: los estados más comunes
| Estado | Qué significa | response.ok |
|---|---|---|
| 200 | Todo bien, aquí están los datos | true |
| 404 | Esa dirección no existe | false |
| 500 | El servidor ha fallado | false |
| (sin respuesta) | No hay red: fetch da un error | No llega a haber respuesta |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
Repaso rápido: fetch
Inténtalo
Repaso rápido: fetch
3 preguntasTus respuestas se corrigen aquí y no se guardan. Una cuenta guarda tus resultados.