Rullst AcademyRullst Academy/Lección
JavaScript e interacción · Lección 12 / 14

Fetch: recibir no es confiar

Recibir una respuesta es solo el inicio de leer datos.

Rutas de aprendizaje18 min

Vamos a descubrir juntos

  1. 1

    fetch devuelve una Promise de Response. Un estado HTTP 404 o 503 suele cumplirla; comprueba response.ok. Fallos de red pueden rechazarla sin una Response accesible al código.

  2. 2

    await response.json() lee e interpreta el cuerpo y puede fallar. JSON válido puede tener formato incorrecto: aquí necesitamos array, ids únicos, títulos, minutos válidos y done booleano. No confíes en datos solo por venir de una respuesta.

  3. 3

    En Rullst Academy los escenarios son simulados sin peticiones de sugerencias. Para HTTP real, abre la terminal en la carpeta extraída y ejecuta python server.py en Windows o python3 server.py en macOS/Ubuntu. Visita http://127.0.0.1:8768; consulta README para preparar Python y detén con Ctrl+C. En lesson.js de esta actividad, cambia case=ready por case=http, case=json o case=shape, guarda y recarga para comparar respuestas.

  4. 4

    Abrir file:// no reproduce un origen HTTP. No desactives protecciones para evitarlo. El servidor escucha solo localmente y sirve archivos permitidos y datos ficticios. No requiere claves, cuentas de API ni servicios externos.

Del ejemplo a tu propia interacción

Descarga el kit, extráelo y abre index.html en el navegador. Edita lesson.js, guarda y recarga. No necesitas Node ni paquetes. README explica HTTP local cuando sea necesario.

La demostración usa JavaScript preparado. No ejecuta código del editor. Descarga tu cambio aparte para probar en el kit local.

Mis archivos y GitHub
Probar el proyecto que construiremos

Planificador de pequeñas misiones

Crea, completa y revisa un plan de estudio con datos ficticios. Las misiones quedan solo en memoria y desaparecen al recargar.

Usa un título corto sin datos personales y minutos enteros de 1 a 120. Hasta 20 misiones.

Misiones del plan
0
Minutos de todas las misiones
0
Misiones terminadas
0

No hay misiones en este filtro. Añade una o elige otro filtro.

    Laboratorio de sugerencias

    Por defecto los escenarios se simulan en este navegador. No se envían peticiones de sugerencias ni se sustituye tu plan.

    Disponible al abrir el kit por http://127.0.0.1:8768. Consulta README; no necesitas cuenta externa.

      Este JSON contiene solo misiones, no código. La demostración no importa archivos ni sincroniza dispositivos. Descarga el JavaScript editado desde el espacio de archivos.

      Enlaces oficiales y siguiente paso

      ✦
      TU MISIÓN

      Distinguir fallo de red, estado HTTP, JSON y formato esperado.

      Ahora te toca

      Taller de descubrimientos

      Pensar antes de ejecutar

      Una petición recibe HTTP 503; otra HTTP 200 con JSON válido pero sin los campos requeridos.
      Prepara tus respuestas y comprueba cuando estés listo.
      Una pausa para entender

      ¿Cómo ejecutar la actividad fetch con origen HTTP?

      Necesito una pista

      Predice el resultado, ejecuta tu archivo y explica la diferencia.

      Cargando tu camino…

      Llévatelo contigo

      Ejecuta éxito, HTTP 503, JSON roto y formato incorrecto. En Red, registra estado y cuerpo; compara con los mensajes.

      A tu ritmo

      Mis archivos y GitHub

      Cada lección puede convertirse en un registro propio: código, notas o un plan de práctica. Guardar un archivo en GitHub es opcional y no cambia tus XP.

      Manual del alumno

      El editor y las descargas se abren cuando esta lección esté disponible para tu cuenta. Revisa el acceso indicado abajo o vuelve al mapa de la ruta.

      Comprobando tu acceso a esta lección…

      Rullstpetbot

      La IA puede equivocarse. Consulta el material de la lección.