Tutorial de Fetch API JS - Ejemplos de Fetch, Post y Header

En este artículo, te enseñaremos cómo utilizar la Fetch API, una herramienta poderosa para consumir recursos de forma asíncrona en JavaScript.
La Fetch API es una opción más simple y fácil de usar para consumir recursos de forma asíncrona que una XMLHttpRequest. Funciona con promesas, no con devoluciones de llamada.

Nos enfocaremos en algunos ejemplos prácticos del uso de la fetch y cómo hacer solicitudes POST, para que puedas ver cómo funcionan estas herramientas en tu proyecto.
El artículo también tocará sobre los encabezados de las peticiones, como el tipo de contenido.

Además, se hablará sobre cómo utilizar la fetch API junto con el método POST, lo cual te permitirá entender mejor su función y cómo hacer solicitudes a través de ella.

Qué es la Fetch API y sus características

La Fetch API es una opción más simple y fácil de usar para consumir recursos de forma asíncrona que una XMLHttpRequest. Fetch funciona con promesas, no con devoluciones de llamada. Esto significa que puedes escribir código como lo harías en un entorno síncrono, pero con la flexibilidad de que se ejecute realmente en paralelo.

Con la Fetch API, puedes realizar solicitudes GET, POST, PUT y DELETE a cualquier servidor web sin tener que preocuparte por la implementación detallada del protocolo HTTP. Esto significa que puedes concentrarte en el código que verdaderamente importa para tu aplicación, y dejar que Fetch se encargue de la parte mecánica.

Una de las características más importantes de la Fetch API es su capacidad para manejar errores de manera elegante. Cuando ocurre un error al realizar una solicitud, la Fetch API devuelve una promesa con el estatus de error asociado. Esto te permite escribir código que se adapte a diferentes escenarios y maneje los errores de manera transparente.

La Fetch API también es compatible con Internet Explorer 10 y superior, lo que significa que puedes utilizarla en un amplio rango de navegadores web. Además, la Fetch API es compatible con otros frameworks y bibliotecas populares como React y Angular, lo que te permite trabajar en proyectos más complejos con mayor facilidad.

La Fetch API es una herramienta poderosa para consumir recursos de forma asíncrona en JavaScript. Su simplicidad, flexibilidad y compatibilidad con navegadores web hacen que sea ideal para cualquier proyecto web.

Solicitud (Request) con Fetch API

La Fetch API es una opción más simple y fácil de usar para consumir recursos de forma asíncrona que una XMLHttpRequest. Funciona con promesas, no con devoluciones de llamada. Para enviar una solicitud a la API, necesitas utilizar el método fetch().

El primer parámetro del método fetch() es la URL a la que se realizará la solicitud. Por ejemplo:
javascript
fetch('https://api.github.com/users/manishmshiva')

Esta solicitud obtendrá toda la información de usuario almacenada en GitHub para el usuario con login "manishmshiva".

Respuesta (Response) con Fetch API

La respuesta es lo que se devuelve desde la API después de una solicitud exitosa. Por ejemplo, si realizamos una solicitud GET para obtener los datos de un usuario en Fetch API, podríamos recibir una respuesta como la siguiente:

javascript
{
login: manishmshiva,
id: 12345,
node_id: MDEyOkJPTU9PNEp0ZWRhNmQ0YTVjYTkyNGJlNGFkZGUwNzI=,
avatar_url: https://avatars.githubusercontent.com/u/12345?v=4,
name: ,
company: null,
blog: ,
location: ,
email: null,
bio: ,
public_repos: 10,
followers: 1,
following: 0,
created_at: 2023-03-31T19:37:32Z,
updated_at: 2023-03-31T19:37:33Z
}


En este ejemplo, la respuesta es un objeto JSON que contiene los datos del usuario, como su ID, nombre de usuario, URL de avatar y otros detalles. La respuesta puede contener diferentes tipos de datos, dependiendo de la estructura de la API y de los datos que se están buscando.

Encabezados (Header) con Fetch API

Los encabezados son metadatos que se envían a la API para ayudar al servidor a comprender qué tipo de solicitud se está haciendo. Con Fetch, puedes acceder fácilmente a los encabezados utilizando el método response.headers.get(). Por ejemplo, si deseas obtener el encabezado Content-Type de una respuesta, puedes utilizar el siguiente código:

javascript
fetch(https://api.github.com/users/manishmshiva)
.then(response => response.headers.get('content-type'))
.then(contentType => console.log(contentType))


Esta línea de código devuelve el encabezado Content-Type de la respuesta y lo loguea en la consola.

Ejemplo de Fetch API GET

El ejemplo anterior es una solicitud GET que devuelve la información del usuario manishmshiva desde el servidor externo. El método GET se utiliza para obtener datos sin modificarlos. La siguiente línea de código realiza dicha solicitud y convierte la respuesta en JSON para poder trabajar con ella:
javascript
fetch(https://api.github.com/users/manishmshiva)
.then(data => data.json())
.then(json => console.log(json))

Tenemos aquí dos promesas: una se utiliza para convertir la respuesta del servidor a un JSON, y la siguiente es para lograr el contenido de json en la consola.

Ejemplo de Fetch API

Estos son los pasos que debe seguir cualquier desarrollador con Fetch API:
1. Primero, debe acceder al método fetch() y pasarle como parámetro el recurso que quiera consumir.
2. Después eso, se deben pasar las opciones en objeto para poder manejar la respuesta del servidor de manera más completa.

Ejemplo de solicitud POST con Fetch API

Para realizar una solicitud POST, hay algunas cosas a tener en cuenta:
- Primero, necesitamos utilizar el método fetch() y establecerlo como "POST".
- Además, tenemos que configurar los encabezados adecuadamente para poder pasar correctamente la información al servidor.
- Por último, debemos especificar el cuerpo de nuestra solicitud (el recurso que estamos enviando) mediante la propiedad body.

javascript
const config = {
headers: {
Accept: 'application/json',
'Content-Type': 'multipart/form-data'
}
}
fetch('https://api.github.com/users', config, {
method: 'POST',
body: JSON.stringify({
login: manishmshiva,
id: 12345
})
}).then(response => response.json())
.then(data => console.log(data));


En el ejemplo anterior estamos pasando dos parámetros al método fetch(): los encabezados y la configuración de la solicitud.

Ejemplo de Fetch API POST

Para realizar una solicitud POST, debemos enviar un objeto JSON como cuerpo de la petición, además del método y encabezados adecuados.

javascript
fetch('https://api.github.com/users', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
**login**: 'manishmshiva',
**id**: 12345,
node_id: 'MDEyOkJPTU9PNEp0ZWRhNmQ0YTVjYTkyNGJlNGFkZGUwNzI='
})
})
.then(response => response.json())
.then(json => console.log(json))


De esta forma, podemos enviar una solicitud POST con los datos adecuados para crear un nuevo usuario en la API de GitHub.

Trabajando con encabezados en Fetch API

Los encabezados son un aspecto importante de cualquier solicitud en el protocolo HTTP, y la Fetch API no es una excepción. Al enviar solicitudes a un servidor, es posible que desees incluir información adicional como metadatos, credenciales o información sobre la solicitud misma. Los encabezados te permiten hacer esto.

Ejemplo de Encabezados en Fetch API

Al realizar una petición Fetch, puedes especificar los encabezados que deseas enviar con la solicitud utilizando el método headers. Por ejemplo:

javascript
fetch('https://api.example.com/data', {
method: 'GET',
headers: {
'Accept': 'application/json',
'Authorization': 'Bearer mi-token'
}
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));


En este ejemplo, se envía una solicitud GET a la URL https://api.example.com/data con dos encabezados: Accept y Authorization. El valor del encabezado Accept especifica que deseas recibir respuestas en formato JSON (application/json). El encabezado Authorization, por otro lado, proporciona una credencial de autenticación para acceder a la información solicitada.

Utilizando Encabezados con Solicitudes POST

Al realizar solicitudes POST, también puedes utilizar encabezados para proporcionar metadatos sobre la solicitud. Por ejemplo:

javascript
fetch('https://api.example.com/data', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
nombre: 'Juan',
edad: 30
})
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));


En este ejemplo, se envía una solicitud POST a la URL https://api.example.com/data con dos encabezados: Content-Type y los datos del cuerpo de la solicitud (body). El valor del encabezado Content-Type especifica que el contenido del cuerpo de la solicitud está en formato JSON (application/json). La información del cuerpo de la solicitud es proporcionada en forma de objeto JSON utilizando JSON.stringify().

Manejo de errores y excepciones en Fetch API

El manejo de errores y excepciones es fundamental cuando se trabaja con la Fetch API, ya que puede ocurrir cualquier cosa durante la comunicación con un servidor externo. Un error común es que el servidor devuelva un código de estado no exitoso (por ejemplo, 404 o 500), lo cual puede ser fácilmente detectado mediante una verificación en la respuesta. Otro posible problema es si la solicitud se cancela debido a problemas de red.

javascript
fetch('https://api.github.com/users/manishmshiva')
.then(response => {
if (!response.ok) {
throw new Error(response.statusText);
}
return response.json();
})
.then(json => console.log(json))
.catch(error => console.error(error));


Otro posible error que se puede producir es si el servidor devuelve un código de estado no esperado (por ejemplo, 401). También pueden ocurrir problemas al parsear la respuesta como JSON.

javascript
fetch('https://api.github.com/users/manishmshiva')
.then(response => response.json())
.then(json => console.log(json))
.catch(error => {
if (error instanceof TypeError) {
console.error('Error al parsear JSON:', error.message);
} else {
console.error('Error desconocido:', error.message);
}
});


Al realizar un fetch post se debe manejar el caso en que la solicitud no sea procesada correctamente.

javascript
fetch('https://api.github.com/users', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name: 'Manish', email: 'manish@example.com' }),
})
.then(response => response.json())
.then(data => console.log('User creado:', data))
.catch(error => {
if (error instanceof TypeError) {
console.error('Error al crear usuario:', error.message);
} else {
console.error('Error desconocido al crear usuario:', error.message);
}
});


Uso de promesas con Fetch API

La Fetch API utiliza promesas para manejar las solicitudes y respuestas. Esto significa que debemos utilizar métodos como .then() para acceder a la respuesta.

Un ejemplo básico es hacer una solicitud GET:
javascript
fetch('https://api.github.com/users/manishmshiva')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Hubo un error:', error));

En este caso, la respuesta viene en formato JSON, por lo que la segunda llamada a .then() convierte esa cadena en un objeto JavaScript.

Si necesitamos realizar una solicitud Fetch POST, podemos hacerlo así:
javascript
const datos = {
nombre: 'Juan',
edad: 25,
};
fetch('https://api.example.com/alta', {
method: 'POST',
body: JSON.stringify(datos),
headers: { 'Content-Type': 'application/json' },
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Hubo un error:', error));

En este caso, estamos haciendo una solicitud POST a una API que no es oficial y simplemente estamos intentando crear un ejemplo.

Conclusión

En este tutorial, hemos cubierto la esencia de la Fetch API, una herramienta poderosa para consumir recursos de forma asíncrona en JavaScript.

La Fetch API nos permite realizar solicitudes a servidores externos y recibir respuestas de manera elegante y sencilla. Con su uso, podemos mejorar significativamente el rendimiento y la experiencia del usuario de nuestras aplicaciones web.

Algunas de las ventajas clave de utilizar la Fetch API son su simplicidad y facilidad de uso, así como su capacidad para realizar solicitudes POST, PUT y DELETE, además de GET.

Si quieres conocer otros artículos parecidos a Tutorial de Fetch API JS - Ejemplos de Fetch, Post y Header puedes visitar la categoría Programacion.