Fetch API en JavaScript: Guía para principiantes con ejemplos de código

La API Fetch de JavaScript es una poderosa herramienta para realizar solicitudes HTTP a cualquier URL de API web y recibir respuestas. Es una forma sencilla y moderna de interactuar con servidores web en el lado del cliente, proporcionando un control total sobre cómo se manejan las solicitudes y respuestas. En esta guía, explicaremos los conceptos básicos de Fetch, desde la configuración de una solicitud hasta el manejo de respuestas. Te guiaremos paso a paso con ejemplos de código claros para que puedas empezar a usar la API Fetch en tus proyectos.

Introducción a Fetch API

La API Fetch proporciona un método estándar para enviar solicitudes HTTP y recibir respuestas. Es una parte fundamental de la especificación del navegador web, lo que significa que está disponible en todos los navegadores modernos. Fetch reemplazó a las funciones obsoletas XMLHttpRequest para realizar solicitudes HTTP en JavaScript. A diferencia de XMLHttpRequest, Fetch devuelve una promesa, lo que permite un manejo asíncrono más eficiente y legible del código.

Realizando una solicitud GET

La solicitud GET es el método HTTP más común, utilizado para recuperar datos de un servidor. La siguiente es una solicitud GET básica usando Fetch:

javascript
fetch('https://api.example.com/users')
.then(response => {
// Manejar la respuesta
console.log(response);
})
.catch(error => {
// Manejar errores
console.error(error);
});


En este ejemplo, fetch() toma la URL de la API como argumento y devuelve una promesa que se puede manipular con then() y catch(). El método then() se ejecuta si la solicitud se completa correctamente, mientras que catch() se ejecuta si hay un error.

Realizando una solicitud POST

La solicitud POST se utiliza para enviar datos a un servidor. Para enviar datos, debemos crear un objeto Body con los datos que queremos enviar.

«`javascript
const data = {
name: ‘John Doe’,
email: ‘john.doe@example.com’
};

fetch(‘https://api.example.com/users’, {
method: ‘POST’,
headers: {
‘Content-Type’: ‘application/json’
},
body: JSON.stringify(data)
})
.then(response => {
// Manejar la respuesta
console.log(response);
})
.catch(error => {
// Manejar errores
console.error(error);
});
«`

En este ejemplo, definimos un objeto data con los datos que queremos enviar. Luego, configuramos la solicitud POST especificando el método, los encabezados y el cuerpo. El Content-Type de los encabezados se establece en application/json, lo que indica que estamos enviando datos JSON. El objeto data se convierte en una cadena JSON usando JSON.stringify().

Realizando una solicitud PUT

La solicitud PUT se utiliza para actualizar datos en el servidor. La estructura de la solicitud PUT es similar a la solicitud POST, con la diferencia de que se utiliza para actualizar un recurso específico.

«`javascript
const data = {
name: ‘Jane Doe’,
email: ‘jane.doe@example.com’
};

fetch(‘https://api.example.com/users/1’, {
method: ‘PUT’,
headers: {
‘Content-Type’: ‘application/json’
},
body: JSON.stringify(data)
})
.then(response => {
// Manejar la respuesta
console.log(response);
})
.catch(error => {
// Manejar errores
console.error(error);
});
«`

En este ejemplo, la URL incluye el ID del usuario que se va a actualizar. Los datos que se enviarán para actualizar el usuario se definen en el objeto data.

Realizando una solicitud PATCH

La solicitud PATCH se utiliza para actualizar parcialmente los datos en el servidor. La estructura de la solicitud PATCH es similar a la solicitud PUT, pero solo se actualizan los campos especificados en el cuerpo de la solicitud.

javascript
fetch('https://api.example.com/users/1', {
method: 'PATCH',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
name: 'Jane Smith'
})
})
.then(response => {
// Manejar la respuesta
console.log(response);
})
.catch(error => {
// Manejar errores
console.error(error);
});


En este ejemplo, solo se actualiza el campo name del usuario con el ID 1.

Realizando una solicitud DELETE

La solicitud DELETE se utiliza para eliminar datos del servidor. La estructura de la solicitud DELETE es simple y solo requiere la URL del recurso que se va a eliminar.

javascript
fetch('https://api.example.com/users/1', {
method: 'DELETE'
})
.then(response => {
// Manejar la respuesta
console.log(response);
})
.catch(error => {
// Manejar errores
console.error(error);
});


Manejar la respuesta de Fetch

La respuesta de Fetch contiene información sobre la solicitud, como el código de estado HTTP, los encabezados y el cuerpo de la respuesta. Para acceder a esta información, se debe convertir la respuesta en un objeto legible.

«javascript
fetch('https://api.example.com/users')
.then(response => {
// Verificar si la solicitud tuvo éxito
if (!response.ok) {
throw new Error(Error: ${response.status}`);
}

// Convertir la respuesta a JSON
return response.json();

})
.then(data => {
// Procesar los datos
console.log(data);
})
.catch(error => {
// Manejar errores
console.error(error);
});
«`

En este ejemplo, primero se verifica el código de estado HTTP de la respuesta. Si el código de estado es exitoso (entre 200 y 299), se convierte la respuesta a JSON usando response.json(). Luego, se procesan los datos JSON en la siguiente instrucción then().

Manejando promesas con async/await

Fetch devuelve una promesa, por lo que se puede manejar usando la sintaxis async/await para un código más legible y fácil de entender.

«`javascript
async function fetchUsers() {
try {
const response = await fetch(‘https://api.example.com/users’);

if (!response.ok) {
  throw new Error(`Error: ${response.status}`);
}

const data = await response.json();
console.log(data);

} catch (error) {
console.error(error);
}
}

fetchUsers();
«`

En este ejemplo, la función fetchUsers() es una función asíncrona. El await en la primera línea espera a que la promesa fetch() se resuelva antes de continuar. Luego, el código dentro del bloque try se ejecuta y maneja la respuesta. Si hay un error, el bloque catch se ejecuta.

Fetch API y CORS

Cuando se realiza una solicitud Fetch a un dominio diferente al del que se origina la solicitud, se debe tener en cuenta la Política de Origen Cruzado (CORS). CORS es una medida de seguridad que evita que los sitios web de origen diferente interactúen entre sí sin permiso. Para evitar problemas de CORS, el servidor web al que se está realizando la solicitud debe configurar los encabezados CORS apropiados.

Fetch API y seguridad

La API Fetch se integra con la seguridad del navegador web. Las solicitudes Fetch se ejecutan en el contexto de seguridad del navegador web, lo que significa que las solicitudes están sujetas a las mismas políticas de seguridad que otras operaciones del navegador. Por ejemplo, si se está realizando una solicitud Fetch a una API que requiere autenticación, se debe proporcionar la información de autenticación necesaria.

Fetch API y rendimiento

La API Fetch está diseñada para ser eficiente y rápida. Se optimiza para realizar solicitudes HTTP de forma asíncrona y sin bloquear la interfaz de usuario del navegador web. En general, la API Fetch es una forma eficiente y confiable de realizar solicitudes HTTP desde aplicaciones web.

Ejemplos de Fetch API

• Obtener datos de un servidor:
  javascript
fetch('https://api.example.com/posts')
.then(response => response.json())
.then(data => {
// Mostrar los posts en la página
const postsContainer = document.getElementById('posts');
data.forEach(post => {
const postElement = document.createElement('div');
postElement.innerHTML = `
<h3>${post.title}</h3>
<p>${post.body}</p>
`;
postsContainer.appendChild(postElement);
});
});


• Enviar un formulario:
  javascript
const form = document.querySelector('form');
form.addEventListener('submit', async (event) => {
event.preventDefault();
const formData = new FormData(form);
const response = await fetch('https://api.example.com/users', {
method: 'POST',
body: formData
});
if (!response.ok) {
// Mostrar un error al usuario
} else {
// Redireccionar al usuario o mostrar un mensaje de éxito
}
});


• Subir un archivo:
  javascript
const fileInput = document.getElementById('file-input');
fileInput.addEventListener('change', async (event) => {
const file = event.target.files[0];
const formData = new FormData();
formData.append('file', file);
const response = await fetch('https://api.example.com/upload', {
method: 'POST',
body: formData
});
if (!response.ok) {
// Mostrar un error al usuario
} else {
// Mostrar un mensaje de éxito
}
});


Conclusiones

La API Fetch es una poderosa herramienta que permite a los desarrolladores web interactuar con servidores web de forma sencilla y eficiente. Fetch devuelve una promesa, lo que permite un manejo asíncrono más eficiente y legible del código. Fetch se integra con la seguridad del navegador web y está optimizada para el rendimiento. Con la API Fetch, los desarrolladores web pueden realizar solicitudes HTTP de forma confiable y segura en aplicaciones web modernas.