Cuando creamos un sitio web moderno, es muy normal tener que solicitar información a alguna API sin tener que recargar la página, esto es necesario hacerlo mediante Javascript y existen varias formas de hacerlo. Anteriormente se usaba Ajax puro y duro, pero hoy en día tenemos varias opciones.
Las 2 principales formas de lograr este propósito, son las que vamos a ver en este artículo. Existen otras formas de hacerlo, pero las más populares son estas: FETCH y AXIOS. En este artículo vamos a ver como funcionan y cuál te conviene utilizar según tus necesidades.
Ambas formas de trabajar funcionan muy bien en Javascript moderno, sin embargo yo me inclino más por utilizar AXIOS, me parece una forma más limpia de hacer las peticiones y siento que me da más ventajas, claro, es un librería externa y no es nativo de Javascript, pero está basada y utiliza Promesas, así qué más que mejor.
Podría interesarte: API REST: ¿Qué son y cómo funcionan?
Empecemos a ver como funcionan, vamos a ver lo que podemos hacer con estas funciones, por ejemplo, hacer peticiones, el manejo de JSON, el manejo de errores, procesos de carga, etc. También incluiré algunos fragmentos de código si siento que es necesario para dejar más clara la idea. ¿Listos? Comencemos.
Hacer peticiones HTTP
Hacemos peticiones HTTP cuando necesitamos traer información de una API enviando la URL del endpoint que queremos consultas. Esto generalmente nos devuelve un archivo JSON o dependiendo la API puede devolvernos incluso una página web completa. No es muy común en Javascript, pero para que sepas que se puede.
Peticiones con fetch( )
La función fetch( ) ya viene incluida en el core de Javascript, así que no hace falta instalar nada en nuestro proyecto para empezar a usarla. En cualquier parte de nuestro código podemos llamar la función fecth( ) y la promesa se ejecutará.
La función solo requiere un parámetro, la URL del lugar donde queremos hacer la petición. Se pueden enviar más parámetros, pero no son requeridos, es decir son opcionales. La forma de funcionamiento es básicamente como cualquier promesa, al final llamamos el callback. Veamos un ejemplo.
// Ejemplo #1
fetch(url)
.then((res) => {
// maneja la respuesta
})
.catch((error) => {
// maneja el error
});
// Ejemplo #2
fetch(url, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(data),
})
.then((response) => response.json())
.catch((error) => console.log(error));
Como puedes ver el funcionamiento es muy sencillo y claro. El callback es la función que está después del .then( y la variable res contiene el resultado de la petición. En caso de que algo salga mal a la hora de realizar la petición, entonces se lanzará el callback después del .catch( fácil y para toda la familia.
El segundo fectch( ) contiene más parámetros, después de la URL podemos enviar un objeto con las opciones, por ejemplo el método, los headers, la data a enviar en caso de ser un registro de datos, etc.
Peticiones con Axios( )
Para utilizar la funciones de Axios es necesario instalarla en caso de estar usando NodeJS o usar el CDN de está librería. Recuerda importarla antes de que se ejecute tu código. Pero bueno, eso ya deberías saberlo. Puede tener su CND de AXIOS en está URL.
Una vez que tienes instalada la librería en tu proyecto puedes comenzar a usar las funciones. En lo personal me gusta mucho más Axios (ya lo había dicho cierto), con está librería el código para realizar la petición sería de la siguiente manera:
// Ejemplo # 1
axios.get(url)
.then((response) => console.log(response))
.catch((error) => console.log(error));
// Ejemplo # 2
axios({
url: "http://api.com",
method: "POST",
header: {
"Content-Type": "application/json",
},
data: { name: "Holyguard", age: 45 },
});
La primera llamada es bastante similar a una petición fetch( ), la siguiente manera de usarlo es enviando un objeto con la información de nuestra petición. En este segundo caso la función nos devolverá una Promesa, esta podemos asignarla a una variable y usarla después.
Esta es la forma más básica de hacer una petición con Axios, como pueden ver no es muy diferente a la forma tradicional con fetch( ), la única diferencia en este ejemplo es la forma de mostrar la información.
Uso del formato JSON
El formato JSON es un formato estándar que se suele utilizar en multitud de APIS al rededor del mundo. Básicamente consiste en un conjunto de datos con estructura «clave»:»valor».
Podría interesarte: ¿Qué es el formato JSON y para qué sirve?
JSON con fetch( )
Con fetch() la respuesta debe convertirse a json, en cambio con Axios la información ya viene en JSON. De esto vamos a hablar a continuación.
Como puede ver en el ejemplo del primer fetch( ) la respuesta debe convertir se a json( ) para poder usar el valor formateado como un archivo JSON. Y cuando los usuarios están enviando el cuerpo con la solicitud, los usuarios necesitan stringificar los datos.
JSON con Axios
En el caso de Axios no hace falta convertir la información enviada ni recibida. También si puedes ver en el ejemplo de la petición, la respuesta ya viene en formato JSON ya se puede solo utilizar.
No es necesario stringificar la información al enviar los datos. Automáticamente los datos se encadenan y se formatean. Es un paso menos y es mucho más cómodo recibir la información e inmediatamente comenzar a usarla.
Manejo de errores
Cuando realizamos una consulta a Internet cualquier cosa puede pasar. Por eso siempre tenemos que jugar a la defensiva y manejar los errores que pueden devolver las peticiones. En ambos casos podemos ver el .catch que sirve para capturar un posible error, sin embargo funciona de forma un poco deferente.
Manejando errores en fetch( )
Cuando usamos fetch( ) hay algunas cosas que tenemos que tener en cuenta, especialmente cuando hacemos una petición erronea que está manejada, por ejemplo, si buscamos un usuario que no existe en la base de datos y nuestra API nos devuelve un error 404 diciendo que no se encontró el usuario. En este caso la petición no falló en el sentido estricto de la palabra, fue recibida, procesada y contestada por la API.
Para este tipo de casos debemos verificar la respuesta siempre que se haga la petición y por supuesto, conocer la API y estar familiarizado con las posibles respuestas. Por ejemplo:
fetch('url')
.then((response)=>{
if(!response.ok){
throw Error (response.statusText);
}
return response.json();
})
.then((data)=>console.log(data))
.catch((error)=>console.log(error))
Dentro del callback de la respuesta evaluamos la información que se recibe y en caso de ser necesarios lanzamos un error con la información que consideremos necesaria. El error se lanzará por defecto solo si algo impide la comunicación con el endpoint.
Manejo de errores en Axios
Con la librería de Axios los errores se manejan de una forma un poco diferente. Internamente la librería revisa el contenido de la repuesta y en caso de recibir un estado 404 llamará inmediatamente el .catch, esto hace que en un solo catch podamos manejar todos errores.
Veamos un ejemplo de código:
axios.get('url')
.then((response)=> console.log(response))
.catch((error)=>{
if(error.response){
// Cuando el código de estado de la respuesta está fuera del rango 2xxx
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
} else if (error.request){
// Cuando no se ha recibido ninguan respuesta despues de haber enviado la request
console.log(error.request);
} else {
// Error
console.log(error.message);
}
});
Existe muchas otra diferencias, pero las más básicas son estas que mencionamos aquí. En próximos artículos hablaré sobre como podemos utilizar estas funciones para calcular el tiempo de carga algún elemento, tanto de descarga como de subida.
En conclusión
Es bueno conocer las diferentes maneras de realizar peticiones con Javascript, si lo necesitamos podemos usar la que nos parezca mejor o mejor se acomode a nuestras necesidades. En lo personal ya saben que yo prefiero Axios, el simple hecho de manejar todos los errores en un solo catch ya es suficiente razón para mi.
Si tienes alguna duda o consulta puedes dejarla en los comentarios y con gusto estaré contestando y ayudando en lo que pueda. Un abrazo y hasta la próxima.