Fetch API y Requests - Tutoriales para GET y POST con JavaScript

El artículo de hoy trata sobre la Fetch API, un mecanismo para realizar llamadas AJAX asincrónicas utilizando JavaScript.

Qué es fetch, como mencioné antes, es una forma de obtener recursos externos de manera asíncrona sin requerir que la página se recargue. Esto significa que el navegador puede solicitar datos de un servidor sin afectar la experiencia del usuario en tiempo real.

La Fetch API proporciona un método llamado fetch(), que podemos utilizar para realizar petición GET a una API externa y recuperar información. A continuación, te mostraré paso a paso cómo hacerlo y cómo manejar la respuesta devuelta por la API.

¿Qué es el Fetch API?

El Fetch API es un mecanismo que permite realizar llamadas AJAX asincrónicas utilizando JavaScript, facilitando la interacción con APIs externas de manera eficiente. Esto se logra mediante el uso de métodos como fetch() para enviar solicitudes y recibir respuestas de una forma limpia y sintáctica.

A pesar de que existen otras formas de realizar llamadas AJAX, como XMLHttpRequest, el Fetch API ofrece un enfoque más moderno y fácil de usar. La introducción del Fetch API en JavaScript proporciona a los desarrolladores una herramienta potente para interactuar con APIs externas y mejorar la experiencia del usuario sin requerir complejos códigos o configuraciones adicionales.

El Fetch API es un método que es fetch y simplifica la realización de llamadas AJAX en JavaScript, convirtiéndolo en una herramienta indispensable para cualquier desarrollador que desee crear aplicaciones web dinámicas.

Cómo usar fetch() para realizar petición GET a una API externa

El Fetch API es un mecanismo que permite realizar llamadas AJAX asincrónicas utilizando JavaScript, de forma natural y sencilla. Para utilizar el método fetch(), primero debemos asegurarnos que tengamos la URL de la API externa a la que deseamos hacer una petición GET. Por ejemplo, si tenemos una URL como "https://api.example.com/datos", podemos proceder a realizar la solicitud.

Para realizar un GET request utilizando fetch(), simplemente llamamos al método con la URL como parámetro:

javascript
fetch('https://api.example.com/datos')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));


En este ejemplo, el código utiliza el método then() para manejar la respuesta devuelta por la API. Primero, se obtiene la información en formato JSON con response.json(), y luego se loguea en consola. Si hay algún problema al realizar la solicitud, el método catch() captura el error y también se loguea en consola.

Manejando la respuesta: promesas y método then()

Cuando utilizamos el método fetch() para realizar una petición a una API externa, recibimos una respuesta que podemos manipular en nuestra aplicación web. La respuesta es un objeto, y nuestro objetivo es extraer la información relevante de ella.

Para hacerlo, necesitamos manejar la promesa devuelta por el método fetch(). Que es fetch? Es simplemente un mecanismo para realizar llamadas AJAX asincrónicas utilizando JavaScript, así que no confundas con otros métodos de JavaScript. Una vez que hayamos hecho la petición y obtenemos una respuesta, podemos usar el método then() para extraer los datos relevantes de ella.

Al utilizar el método then(), podemos acceder a la información proporcionada por el servidor mediante el atributo response.json(). Esto nos permite obtener un objeto JSON con la información solicitada. Por ejemplo, si estuvimos buscando una lista de usuarios, podríamos extraer todos los usuarios del array que nos devuelve la respuesta.

Realizando un POST Request: configuración de opciones

Para realizar un POST request utilizando la Fetch API, es necesario establecer algunas opciones específicas. Una de estas opciones es especificar que se trata de un método POST, lo que se logra mediante el objeto options que se pasa al método fetch(). De esta manera, podemos utilizar el método fetch() con las siguientes opciones configuradas:
javascript
fetch(url, {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({ /* datos a enviar */ })
})

Con estas opciones establecidas, puedes enviar información a una API externa mediante un método POST. Esta acción se utiliza con frecuencia para crear nuevas publicaciones o realizar operaciones de escritura en la API.

Al especificar el objeto options, debemos recordar que que es fetch y cómo funciona en conjunto con los encabezados HTTP. Por ejemplo, al utilizar el método fetch() con opciones configuradas como se muestra arriba, estamos indicando que nos interesa enviar un contenido de tipo JSON.

Ejemplo práctico de POST Request: enviando datos a una API externa

Para enviar nuevos datos a una API externa, podemos utilizar el método POST, que es similar al GET pero envía información en lugar de obtenerla. Primero debemos entender que es fetch y cómo se utiliza para realizar esta solicitud.

El código queda como sigue:
```javascript
// Configuración para realizar un POST request a la API externa
const urlApi = 'https://jsonplaceholder.typicode.com/posts';
const nuevoPost = {
title: 'Mi nuevo título',
body: 'Este es el cuerpo de mi nueva publicación'
};

fetch(urlApi, {
method: 'POST',
headers: { // Se definen los encabezados que se enviarán con la solicitud
Accept: 'application/json, text/plain, /',
'Content-Type': 'application/json' // El tipo de dato es JSON
},
body: JSON.stringify(nuevoPost), // Los datos a ser enviados en formato JSON
})
.then(response => response.json()) // Obtenemos la respuesta y la conviertimos en JSON
.then(postCreado => console.log('Post creado correctamente', postCreado))
.catch(error => console.error('Error al crear el post:', error));
``
En este ejemplo se configura la URL de la API externa a donde deseamos enviar los datos, y luego se define un nuevo objeto con dos propiedades: título y cuerpo. El método **POST** se utiliza para indicar que estamos enviando nuevos datos en lugar de obtenerlos. Se especifica el tipo de dato como JSON mediante el encabezadoContent-Type`, y finalmente se convierten los datos a formato JSON y se envían en la solicitud.

Configuración de opciones para fetch() en POST requests

Al realizar un solicitud POST, hay algunas opciones que debemos configurar correctamente para asegurarnos de que la información se envía de manera adecuada a la API externa. Una de las primeras decisiones que tenemos que tomar es el método con el que realizaremos la solicitud, en este caso, el método POST.

Para enviar datos a una API mediante fetch(), podemos utilizar el siguiente formato:

javascript
fetch('https://api.example.com/posts', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
title: 'Un nuevo post',
description: 'Este es un ejemplo de cómo enviar datos a una API.'
})
})


En este caso, estamos enviando dos campos: title y description, en formato JSON. Para hacer esto, necesitamos asegurarnos de que el encabezado de contenido esté configurado correctamente para indicar que estamos enviando un objeto JSON.

Conclusión

La Fetch API y el uso correcto de sus métodos para realizar solicitudes GET y POST son herramientas poderosas para cualquier desarrollador web que desee interactuar con APIs externas en JavaScript.

Si deseas realizar un GET request, solo tienes que escribir un código simple que utilice el método fetch() y, mediante el uso de then(), obtendrás la información solicitada. Por otro lado, si necesitas enviar datos a una API para realizar alguna acción específica, como agregar un nuevo post a tu blog, puedes utilizar el método POST en conjunto con fetch().

El fetch es fácilmente personalizable gracias al uso de opciones adicionales, lo cual nos permite adaptarlo a diferentes casos y requiriendo que necesitemos hacer.

Si quieres conocer otros artículos parecidos a Fetch API y Requests - Tutoriales para GET y POST con JavaScript puedes visitar la categoría Programacion.