Lee JSON mediante fetch desde un recurso de ejemplo

La idea clave

fetch solicita un recurso y devuelve una promesa. Para que puedas repetir la práctica sin depender de internet, aquí se solicita una URL data: con JSON: es una petición real del navegador a un recurso embebido, no una respuesta inventada.

Ejemplo paso a paso

Este ejemplo muestra la idea en acción. Sigue los pasos y después cámbialo tú.

async function cargar() {
  const url = 'data:application/json,%7B%22nombre%22%3A%22Ada%22%7D';
  const respuesta = await fetch(url);
  const persona = await respuesta.json();
  document.querySelector('#saludo').textContent = persona.nombre;
}
cargar();

Editar y probar este mismo ejemplo ↓

1. La URL data: contiene un pequeño JSON reproducible.
2. fetch recibe ese recurso mediante la API real del navegador.
3. respuesta.json() convierte el cuerpo y el nombre aparece en la vista previa.

Practica con código

Antes de empezar, piensa: ¿El nombre llega de una petición fetch o de un objeto escrito a mano?

Cambia el texto mostrado a «Hola, » + persona.nombre.