Consumiendo una API en JavaScript con Fetch
Consumir datos de una API REST en JavaScript es una tarea común y sencilla gracias a la interfaz Fetch, que reemplaza al antiguo XMLHttpRequest y ofrece una sintaxis basada en promesas, más simple que los callbacks.
Realizando una petición GET
Para hacer una solicitud GET utilizando Fetch, simplemente especificamos la URL de la API:
fetch("https://example.com/posts.json")
.then(response => response.json())
.then(data => console.log(data));
En este ejemplo:
fetchdevuelve una promesa que resuelve la respuesta del servidor.- Usamos
response.json()para parsear la respuesta JSON devuelta por el servidor. - Finalmente, utilizamos otra promesa para manejar los datos obtenidos (
data), que luego mostramos en la consola.
Métodos disponibles según el tipo de datos
Fetch proporciona métodos adicionales dependiendo del tipo de datos que se espere recibir:
blob(): Para objetos binarios grandes.arraybuffer(): Para datos en formato de buffer genérico.json(): Para datos en formato JSON (el más común).text(): Para datos en formato de texto plano.formData(): Para parsear datos como un objeto FormData.
Manejo de la respuesta del servidor
Es posible verificar si la respuesta del servidor fue exitosa utilizando la propiedad ok:
fetch("https://example.com/posts.json")
.then(response => {
if (response.ok) console.log("Respuesta correcta del servidor");
});
Utilizando async/await con Fetch
Para una estructura más concisa y legible, podemos utilizar async/await con Fetch:
async function fetchData() {
try {
const response = await fetch("https://example.com/posts.json");
if (!response.ok) {
throw new Error("Error al obtener los datos");
}
const data = await response.json();
console.log(data);
} catch (error) {
console.error(error);
}
}
fetchData();
Enviando datos con Fetch
Fetch permite enviar datos utilizando otros métodos HTTP además de GET, como POST, PUT, DELETE, entre otros. Podemos especificar el método, las cabeceras y el cuerpo de la petición:
const data = { username: 'example', password: 'example' };
const response = await fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
});
En este ejemplo, estamos enviando datos en formato JSON al servidor utilizando el método POST.
Con estas capacidades, Fetch se convierte en una herramienta poderosa para interactuar con APIs REST de manera eficiente y moderna en aplicaciones web desarrolladas con JavaScript.
