JavasScript - Api Fetch
Fetch es el nombre de una API moderna de JavaScript que nos permite realizar peticiones HTTP de forma asíncrona utilizando promesas. Gracias a esto, podemos escribir código más limpio, legible y fácil de mantener en comparación con métodos tradicionales como XMLHttpRequest. Además, Fetch se integra con async y await, lo que facilita el manejo de respuestas y errores al trabajar con datos provenientes de servidores.
¿Cómo usar Fetch?
La forma de realizar una petición con fetches muy sencilla, básicamente se trata de llamar a fetch y pasarle por parámetro la URL de la petición a realizar:
1
2
3
4
5
6
7
8
const promise = fetch("/data/colaboradores.json")
promise.then(function(response) {
/* --- */
})
// O más abreviado con arrows functions
promise.then((response) => /* ... */)
Fetch devolverá una promesa (PROMISE) que será aceptada cuando reciba una respuesta y sólo será rechazada si hay un fallo de red o si por alguna razón no se pudo completar la petición (ej. URl incorrecta).
El modo más habitual de manejar las promesas es utilizando el método .then(), aunque también se puede utilizar async/await. Esto se suele reescribir de la siguiente forma, que queda mucho más simple y evitamos constantes o variables de un solo uso:
1
2
3
4
fetch("/data/colaboradores.json")
.then(function(response) {
/* Código que procesa la respuesta */
})
Procesar respuestas
Por otra parte, la instancia response también cuenta con varios métodos interesantes. La mayoría de ellos permiten procesar, mediante promesas, los datos recibidos en la respuesta, facilitando así su manipulación y uso con JavaScript.
| Método | Retorno | Descripción |
|---|---|---|
.text | String | Devuelve una promesa con el texto plano de la respuesta. |
.json() | Object | Devuelve un objeto json equivalente a usar JSON.parse(). |
.blob() | Object | Devuelve un objeto Blob (binary large object). |
.arrayBuffer() | Object | Devuelve un objeto ArrayBuffer (buffer binario puro). |
.formData() | Object | Devuelve un objeto FormData (datos de formularios). |
.clone() | Object | Crea y devuelve un clon de la instancia response. |
Reponse.redirect(url, code) | Object | Redirige a una URL, opcionalmente con un código de error. |
Formas de procesar promesas
Tenemos como ya mencionamos anteriormente dos foras de consumir la promesa.
a
b