Realización de solicitudes GET
Obtenga datos y analice respuestas JSON.
Realización de solicitudes GET es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 4 lecciones en total.
Qué hace fetch
La Fetch API realiza solicitudes HTTP desde el navegador y devuelve un Promise. Es el reemplazo moderno de la antigua XMLHttpRequest.
Un GET básico
Llame a fetch(url) con una URL. De forma predeterminada, usa el método GET y se resuelve con un objeto Response.
fetch("https://api.example.com/users")
.then((response) => {
console.log(response.status); // 200
});El objeto Response
El valor resuelto es un Response, no los datos en sí. Contiene el estado, las cabeceras y los métodos para leer el cuerpo. Debe llamar a un método del cuerpo para obtener su contenido.
fetch(url).then((response) => {
console.log(response.ok); // true if status 200-299
console.log(response.status); // 200
});Analizar JSON
La mayoría de las API devuelven JSON. Llame a response.json(), que a su vez devuelve un Promise que se resuelve en el objeto analizado.
fetch(url)
.then((response) => response.json())
.then((data) => {
console.log(data); // parsed JS object/array
});Por qué hay dos Promises
El primer Promise se resuelve cuando llegan las cabeceras; el segundo (.json()) se resuelve cuando se ha descargado y analizado el cuerpo completo. Por eso encadena dos llamadas a .then().
Usar async/await
La mayoría del código usa async/await por legibilidad. Cada await pausa la ejecución hasta que se resuelve su Promise.
async function getUsers() {
const response = await fetch(url);
const data = await response.json();
return data;
}Otros lectores del cuerpo
Además de json(), un Response se puede leer como text(), blob() (binario), arrayBuffer() o formData(). Elija la opción según lo que devuelva el servidor.
const response = await fetch(url);
const html = await response.text(); // raw stringEl cuerpo se lee una sola vez
El cuerpo de una respuesta es un flujo que solo puede consumir una vez. Si llama a json() y después a text() sobre la misma respuesta, se producirá un error. Use response.clone() si realmente necesita ambas representaciones.
Parámetros de consulta
Construya cadenas de consulta de forma segura con URLSearchParams en lugar de concatenarlas manualmente. Esta API codifica los caracteres especiales por usted.
const params = new URLSearchParams({ page: 2, q: "hello world" });
fetch("https://api.example.com/search?" + params);Enviar cabeceras
Pase un segundo argumento con las opciones. Para GET, a menudo se establece una cabecera Accept o un token de autenticación.
fetch(url, {
headers: {
"Accept": "application/json",
"Authorization": "Bearer " + token
}
});Devolver el Promise
Encapsule la lógica de fetch en una función que devuelva el Promise para que los llamadores puedan esperarlo con await. Así, la carga de datos se puede reutilizar en toda la aplicación.
function loadUser(id) {
return fetch("/api/users/" + id).then((r) => r.json());
}Comprobación rápida
Solicitudes GET con fetch.
Resumen
fetch(url) devuelve un Promise para obtener un Response. Lea el cuerpo con json(), text() o blob() (solo una vez). Use async/await para mayor claridad, URLSearchParams para las cadenas de consulta y un objeto de opciones para las cabeceras. Encapsúlelo en funciones que devuelvan el Promise para poder reutilizarlo.
Preguntas frecuentes
¿La lección «Realización de solicitudes GET» es gratis?
Sí — el texto completo de «Realización de solicitudes GET» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Realización de solicitudes GET»?
Obtenga datos y analice respuestas JSON. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar JavaScript Academy?
No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «Realización de solicitudes GET»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?
Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Realización de solicitudes GET
- POST y envío de datos
- Gestión de errores y códigos de estado
- Cancelación de solicitudes con AbortController