Realizar peticiones HTTP es una habilidad fundamental para cualquier desarrollador que trabaja con aplicaciones web. En este artículo, aprenderás a realizar peticiones GET y POST en JavaScript de manera sencilla y efectiva, utilizando la API Fetch, que nos ofrece una forma más moderna y poderosa de interactuar con recursos en la web.
Peticiones GET en JavaScript
Las peticiones GET se utilizan para solicitar datos de un servidor. Vamos a comenzar con un ejemplo simple que hace uso de la API Fetch para obtener datos de un servicio REST.
Ejemplo de una petición GET
Imagina que queremos obtener una lista de usuarios desde una API pública. A continuación, te mostramos cómo hacerlo:
const url = 'https://jsonplaceholder.typicode.com/users';
fetch(url)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok' + response.statusText);
}
return response.json();
})
.then(data => {
console.log(data); // Muestra la lista de usuarios en consola
})
.catch(error => {
console.error('Hubo un problema con la petición Fetch:', error);
});
¿Qué hace cada parte del código?
- fetch(url): Inicia la petición GET hacia la URL proporcionada.
- then(response): Maneja la respuesta del servidor.
- response.json(): Convierte la respuesta en formato JSON.
- catch(error): Captura y maneja cualquier error que ocurra durante la solicitud.
Peticiones POST en JavaScript
Las peticiones POST son utilizadas para enviar datos al servidor, generalmente para crear o actualizar recursos. A continuación, te mostraremos un ejemplo donde enviamos un nuevo usuario a la misma API.
Ejemplo de una petición POST
Vamos a enviar un objeto de usuario al servidor:
const url = 'https://jsonplaceholder.typicode.com/users';
const newUser = {
name: 'Juan Pérez',
username: 'juanp',
email: 'juan.perez@example.com'
};
fetch(url, {
method: 'POST', // Método POST
headers: {
'Content-Type': 'application/json', // Tipo de contenido
},
body: JSON.stringify(newUser) // Convertimos el objeto a una cadena JSON
})
.then(response => response.json())
.then(data => {
console.log('Usuario añadido:', data); // Muestra el nuevo usuario en consola
})
.catch(error => {
console.error('Hubo un problema con la petición Fetch:', error);
});
Desglose del código de la petición POST
- method: ‘POST’: Indica que estamos realizando una petición POST.
- headers: Especifica el tipo de contenido que estamos enviando (JSON en este caso).
- body: Contiene los datos que queremos enviar, convertidos a formato JSON.
Las peticiones GET y POST son fundamentales para interactuar con APIs. A través de estos ejemplos, has aprendido cómo hacer solicitudes simples usando Fetch, una herramienta poderosa y fácil de usar para desarrolladores. Ahora, puedes utilizar estos conceptos para trabajar con tus propias aplicaciones web y realizar operaciones que requieran comunicación con servidores.