Cómo utilizar fetch en JavaScript: ejemplos y explicación detallada

Fetch es una función que se utiliza en JavaScript para realizar solicitudes HTTP. Es una alternativa moderna a las funciones XMLHttpRequest tradicionales y ofrece una forma más sencilla de realizar solicitudes HTTP y manejar las respuestas.

Ejemplo de usos

Aquí hay un ejemplo de cómo utilizar fetch para realizar una solicitud GET a una API de ejemplo:

fetch('https://api.example.com/endpoint')
        .then(response => response.json()) 
        .then(data => console.log(data)) 
        .catch(error => console.error(error)) 

En este ejemplo, la función fetch realiza una solicitud GET a la URL proporcionada y luego procesa la respuesta utilizando .then(). La respuesta es un objeto de respuesta que contiene diversos métodos para procesar la respuesta, como json() que convierte la respuesta en un objeto JavaScript.

Uso metodo POST

También puedes usar fetch para enviar datos en una solicitud utilizando el método POST:

const data = { username: 'example' }
        fetch('https://api.example.com/endpoint', { method: 'POST', body: JSON.stringify(data), headers: { 'Content-Type': 'application/json' } }) 
        .then(response => response.json()) 
        .then(data => console.log(data)) 
        .catch(error => console.error(error))

En este ejemplo, se envía un objeto data a la URL proporcionada utilizando el método POST. También se especifica el tipo de contenido en el encabezado de la solicitud utilizando Content-Type.

Es importante tener en cuenta que fetch no soporta la cancelación de solicitudes de forma nativa. Si necesitas cancelar una solicitud en curso, puedes utilizar una biblioteca como axios o una promesa personalizada que admita la cancelación.

Espero que esto te haya ayudado a entender cómo utilizar fetch en JavaScript. Si tienes alguna pregunta adicional, no dudes en hacerla.