¿Qué es fetch en JavaScript?
Fetch es una API moderna en JavaScript que se utiliza para realizar solicitudes HTTP, tales como obtener datos de un servidor o enviar datos a un servidor. Introducida en ES6, Fetch proporciona una forma más intuitiva y legible de manejar las operaciones de red en comparación con el antiguo método XMLHttpRequest. Una de las principales ventajas de Fetch es su uso de promesas, lo que permite manejar asincronía de una manera más limpia y manejable.
Características principales de fetch
- Sintaxis simplificada: La API fetch usa promesas, lo que facilita la lectura y manejo del código asincrónico.
- Manejo de respuestas: Permite procesar respuestas fácilmente en diferentes formatos como JSON, texto, y más.
- Compatibilidad: Fetch es compatible con la mayoría de los navegadores modernos.
Cómo usar fetch
El uso básico de fetch involucra llamar a la función fetch() con la URL del recurso que deseas obtener, seguido del manejo de la respuesta usando promesas. Aquí tienes un ejemplo sencillo:
fetch('https://api.ejemplo.com/datos')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
En este ejemplo, fetch() realiza una solicitud GET a la URL proporcionada. La respuesta es manejada primero con response.json() para convertirla a un objeto JSON, y luego se maneja el objeto resultante. Si ocurre un error durante la solicitud, se captura y se muestra en la consola.
Algunos ejemplos
Ejemplo 1: Solicitud GET básica
fetch('https://api.ejemplo.com/usuarios')
.then(response => response.json())
.then(usuarios => {
usuarios.forEach(usuario => {
console.log(usuario.nombre);
});
})
.catch(error => console.error('Error:', error));En este ejemplo, se realiza una solicitud para obtener una lista de usuarios y se imprime el nombre de cada usuario en la consola.
Ejemplo 2: Enviar datos con una solicitud POST
fetch('https://api.ejemplo.com/crear-usuario', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
nombre: 'Juan',
edad: 30
})
})
.then(response => response.json())
.then(data => console.log('Usuario creado:', data))
.catch(error => console.error('Error:', error));En este ejemplo, se envían datos a un servidor utilizando una solicitud POST. Los datos se envían en formato JSON, y la respuesta del servidor también se maneja como JSON.
Referencias a sitios oficiales
Para obtener más información y ejemplos avanzados, puedes consultar la documentación oficial de Mozilla sobre fetch.
Jorge García
Fullstack developer