Desde KeepCoding, pensamos que una de las mejores formas de entender un nuevo concepto en JavaScript es revisar cómo se ve en nuestra consola. Es decir, cuáles son las propiedades y datos que nos devuelve. En este post, te explicaremos exactamente qué devuelve una petición HTTP con Fetch para que la entiendas mejor.
¿Qué es una petición HTTP con Fetch?
En nuestro post sobre peticiones HTTP con Fetch, te hemos explicado que fetch es un método con el que podemos interactuar con el navegador gracias al concepto de BOM o Browser Object Model. En este sentido, Fetch actúa como una especie de Axios, pero implementado de manera nativa directamente en el navegador (conoce sus diferencias en nuestro post sobre Fetch o Axios).
Un detalle particular de las peticiones HTTP con Fetch es que devuelven promesas. ¿Por qué? Pues porque las peticiones HTTP pueden tardar un tiempo indeterminado según las condiciones. Por ello, se consideran procesos que se pueden manejar con promesas. Esto también quiere decir que sus respuestas se pueden controlar con métodos como then, catch, reject y resolve.
Si tienes dudas sobre el concepto de promesas, te invitamos a revisar nuestros posts sobre promesas en frontend JavaScript y sintaxis de promesas en JavaScript.
A continuación, te enseñamos exactamente qué devuelve una petición HTTP con Fetch.
¿Qué devuelve una petición HTTP con Fetch?
Para revisar qué devuelve una petición HTTP con Fetch, lo mejor es pintar su respuesta por la consola. Para ello, podemos ejecutar un método then sobre la promesa de esta petición y pintar la respuesta usando el comando console.log. A continuación, te mostramos exactamente cómo escribimos esto. Ten en cuenta que identificamos la respuesta de Fetch como responseHttp.
fetch (url)
.then ((responseHttp) => {
console.log (responseHttp)
})
Con la líneas de código anteriores, hemos logrado pintar la respuesta de nuestra petición HTTP por la consola. Entonces, utilizando el inspector de tu navegador en la sección de console, podrás ver que al ejecutar esta acción hemos obtenido un objeto response. Este objeto tiene diversas propiedades y datos.
Cuando buscamos qué devuelve una petición HTTP con Fetch, veremos principalmente un body. Este segmento de response es un ReadableStream en donde se encuentran nuestros datos. ¿Cuáles? Pues los que hemos pedido en nuestro post sobre traer datos de una API con Fetch.
Como otras propiedades de este objeto response veremos una titulada headers. El valor de esta propiedad dependerá de tu petición en particular.
Para conocer más sobre los distintos elementos de una petición HTTP y cómo verlos en la consola de tu navegador, te invitamos a leer nuestro post sobre cómo funciona el inspector web.
Dentro de lo lo que devuelve una petición HTTP con Fetch están otras propiedades como status, url y ok.
- La primera propiedad, status, tendrá como valor el código del estado en el que se encuentra una petición (200, por ejemplo).
- La propiedad url se refiere al enlace que se está consumiendo para hacer la petición. Es decir, el enlace que recibe el método fetch como parámetro.
- Finalmente, la propiedad ok nos da un valor booleano (true o false) dependiendo de si la respuesta está bien o no.
¿En qué momento estaría mal una respuesta? Pues el valor de la propiedad ok podría ser false cuando la URL que hemos insertado tiene un error en su escritura. En este escenario, la propiedad status, además, pasaría a tener un código de error (404). En este sentido, esta respuesta sería tomada como un ejemplo de error. Por ello, para ver esta respuesta tenemos que insertar un método catch como forma de manejar la promesa que devuelve Fetch.
A continuación, te mostramos cómo usamos el método catch para pintar por consola el error que se obtiene de una petición HTTP hecha con Fetch:
fetch (url)
.then (responseHttp) => {
console.log (responseHttp)
})
.catch ((error) => {
console.log (error);
})
¿Quieres seguir aprendiendo?
Ahora que sabes exactamente qué devuelve una petición HTTP con Fetch, ¡te invitamos a crear tus propias peticiones en tus proyectos web! Para seguir aprendiendo sobre la creación y desarrollo de todo tipo de proyectos, te invitamos a ser parte de nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación intensiva donde aprenderás a desarrollar con lenguajes como JavaScript, HTML, CSS y más. ¡No te lo pierdas y solicita información!
