Tabla de Contenido
Fetch en Javascript, permite realizar una de las acciones más comunes que realizamos cuando trabajamos con Javascript; realizar peticiones a un servidor para poder recoger la petición y hacer uso de ella o estar en constante actualización.
Por ejemplo, cuando queremos iniciar sesión consultando un registro en la base de datos o cuando queremos obtener la últimas notificaciones de nuestra sistema de mensajería, todo esto sin tener que recargar la página, son cosas que comúnmente podemos realizar mediante Fetch API
Es importante mencionar que existen múltiples formas de realizar esto, como por ejemplo, mediante un objeto XHR o utilizando JQuery con sus métodos Ajax, Post, Get.
Sin embargo, el más moderno o actual sin duda es Fetch en Javascript, a pesar de que no es soportado por navegadores antiguos (No deberías de estar utilizando navegadores antiguos), es la forma actualmente utilizada para poder generar peticiones al servidor.
¿Cómo se usa fetch en Javascript?
Una de las caracteristicas más importantes de Fetch en Javascript, es que nos permite enviar peticiones mediante los verbos de http GET, POST, PUT, PATCH, DELETE, por mencionar algunos.
Es por ello que en esta ocasión quiero comentarte acerca de las cosas que podemos realizar mediante Fetch en Javascript, empecemos por lo básico, su sintaxis.
Sintaxis de Fetch en Javascript
const request = fetch(url, {options})La sintaxis de Fetch en Javascript se compone del método fetch que recibe 2 párametros, el primero es la url, la cual es un parámetro requerido, mientras que el segundo es un objeto options, el cual será opcional.
Si no enviamos el parámetro opción dentro de la petición de Fetch en Javascript, automáticamente estaremos enviando una petición de tipo GET, esto lo interpretará el navegador y retornará la información en forma de promesa(promise).
Promesas en Javascript
Recuerda que para poder acceder a una promesa, normalmente tendremos que realizar 2 operaciones:
La primera será obtener la respuesta que retorna el servidor en un objeto de tipo Response el cual tendremos que parsear con el método json()
La segunda será el cuerpo o body de la solicitud, es decir, en términos sencillos, la información que estás esperando recibir del servidor, te dejo un ejemplo para analizarlo:
fetch('http://localhost/api-flight/users')
.then(response => response.json())
.then(json => console.log(json))Como podrás observar, en la primera línea se envía la petición a la url, recuerda que como no pusimos parámetros, por defecto es una petición de tipo GET.
La petición fetch en Javascript se envío a un endpoint de un servidor local que tengo ejecutandose con PHP, Si quieres aprender a desarrollar una API en PHP te dejo el curso aquí.
Recuerda que adicional a esto también podemos hacer uso de cualquier otra tecnología para poder desarrollar APIs y realizar peticiones, por ejemplo, con node mediante fetch node js, pero ese es otro tema, por el momento, continuamos.
En la segunda línea obtenemos el objeto response y lo parseamos mediante el método json()
y en la tercera línea, ya podemos hacer uso del json, en este caso imprimí los resultados con un console.log() para poder revisar el contenido.
Existe otro método para poder realizar la petición fetch y es mediante el uso de async/await
const fetching = async(url) => {
const response = await fetch(url)
const json = await response.json()
console.log(json)
}
fetching('http://localhost/api-flight/users')
Lo primero que tendremos que hacer es definir una función de tipo async, si observas en la primera línea, definimos la función fetching y le pasamos por parámetro la url
Dentro de la función, añadimos el await, que sería el “reemplazo” del .then() que hicimos en el ejemplo anterior, esto lo seteamos a una variable response y volvemos a hacer uso del await para poder convertir el response en un json.
Ya por último, solo queda ejecutar la función pasandole la url que queramos consultar.
Si necesitamos hacer uso de las cabeceras o headers de la respuesta, podemos acceder de esta manera
console.log(response.headers.get('Content-length'))En este caso, estaríamos accediendo a la cabecera Content Length del response.
Fetch POST
Si ahora quisieramos enviar una solicitud vía POST, te muestro con un ejemplo como hacerlo
const fetching = async(url) => {
const data = {
"email": "hola@8devmx.com",
"password": "mipassword"
}
const response = await fetch(url, {
headers: {
'Content-Type': 'application/json'
},
method: "POST",
body: JSON.stringify(data)
})
const json = await response.json()
console.log(json)
}
fetching('http://localhost/api-flight/auth')
En este caso, le estoy enviando datos a través de la constante data que contiene el email y password, adicional, envío el segundo parámetro de fetch que como puedes observar es un objeto, el cual contiene las propiedades headers, para poder indicar el Content-Type, la propiedad method, para indicar que es de tipo POST y el cuerpo de la petición que deberá enviarse mediante el método JSON.stringify(), todo lo demás quedó como lo teníamos en un principio cuando enviamos peticiones GET.
Recuerda que los objetos son un tipo de datos de los más ocupados en Javascript, ya que permiten almacenar colecciones de datos en una misma variable, por lo que podemos extraer el segundo parámetro de fetch en javascript y setearlo a una variable de tipo objeto, algo como esto:
const options = {
headers: {
'Content-Type': 'application/json'
},
method: "POST",
body: JSON.stringify(data)
}Pasa exactamente lo mismo si quieres hacer peticiones de tipo PUT, PATCH o DELETE, la sintaxis es muy similar y obtendríamos la respuesta de la misma manera.
En resumen
Como podemos observar, el uso de Fetch en Javascript es muy sencillo, y nos permite realizar cosas bastante interesantes, además, te dejo algunos otros enlaces para complementar la información que te proporciono. Fetch Javascript w3schools
- JQuery y sus métodos AJAX se siguen ocupando, sin embargo, cada vez están más en desuso por lo que te recomiendo utilizar Fetch
- Fetch por defecto envia una petición de tipo GET
- Si queremos cambiar el verbo o método, debemos agregar el objeto options a nuestra petición fetch en Javascript como segundo parámetro.
- La respuesta del servidor retornará en forma de promesa mediante un objeto response
- Es posible acceder al status o headers de la promesa recibida
- Podemos hacer uso de la sintaxis mediante then() o también podemos hacer uso mediante async/await.
Si llegaste hasta este punto y te gusta mi contenido, te pido te suscribas a mi canal de Youtube en donde te explico esta información de una manera visual con ejemplos prácticos, Sígueme en mis redes sociales: Facebook e Instagram para más contenido.
