La API de fetch
nos permite crear una solicitud HTTP para que logremos una serie de cosas en Javascript , como recuperar datos de una API, publicar datos en un servidor o simplemente obtener todo el contenido de una página web. Esta solicitud HTTP recuperará datos de forma asíncrona de la URL proporcionada y generará algún tipo de respuesta HTTP. Veamos cómo funciona.
La función fetch()
es una función global y se usa con mayor frecuencia para interactuar con las API. Si eres nuevo en esto, no estás solo, así que echemos un vistazo a cómo funciona fetch()
.
El uso más básico de fetch toma un argumento: la URL que queremos buscar. Dado que fetch
genera solicitudes HTTP, siempre tenemos que proporcionar una URL:
let fetchExample = fetch("https://fjolt.com").then((res) => { // Do something with res });
Dado que el resultado de una búsqueda es asíncrono, podemos usar then()
para capturar la respuesta y hacer algo con ella. Lo bueno de la res
o respuesta devuelta es que tiene un montón de métodos integrados, que nos permiten analizar inmediatamente el contenido que obtenemos de fetch
:
res.text()
: devuelve el contenido de texto de una URL. Si es un sitio web, devuelve el HTML.res.json()
: devuelve datos JSON formateados, si existen.res.blob()
: devuelve datos de blobs, si los hay.res.arrayBuffer()
- devuelve datos de arrayBuffer, si existe alguno.res.formData()
: devuelve datos de formData, si existen.
Dado que diferentes URL producen diferentes tipos de contenido, los métodos anteriores nos permiten analizar ese contenido de la forma que queramos. Para entender cómo funciona todo eso, veamos dos ejemplos muy comunes.
Como se mencionó anteriormente, res.text()
nos brinda el contenido de texto de una URL, por lo que podemos usarlo para obtener todo el contenido HTML de una URL. Una vez que capturamos nuestra respuesta usando res.text()
, podemos capturar la respuesta con otro then
, permitiéndonos descargar y devolver el contenido de la URL provista:
let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => { return data; }); // Now contains our website's HTML.
Si el enlace no existe o se produce un error, nuestro objeto de response
contendrá un error. Por ejemplo, una página no encontrada devolverá 404
, o un error de puerta de enlace incorrecta devolverá 502
.
Si el contenido de una URL consiste en JSON, podemos usar res.json()
. El siguiente código, por ejemplo, devolverá un objeto JSON desde la URL, suponiendo que la URL devuelva un JSON válido:
let apiResponse = fetch("https://fjolt.com/api").then(res => res.json()).then((data) => { return data; }); // Now contains a JSON object - assuming one exists
También es importante entender las opciones disponibles en fetch,. Vienen después de la URL, como un objeto, es decir, fetch(URL, { options })
. Si ha trabajado con solicitudes HTTP antes, algunas pueden resultarle familiares. La función de fetch
que se muestra a continuación contiene todas las opciones posibles que puede usar:
fetch("https://fjolt.com/", { body: JSON.stringify({ someData: "value" }) method: 'POST' mode: 'cors' cache: 'no-cache' credentials: 'same-origin' headers: { 'Content-Type': 'application/json' }, redirect: 'follow' referrerPolicy: 'no-referrer' });
Y aquí hay un resumen de lo que significa cada uno de estos:
body
contiene el cuerpo del texto. En este ejemplo, enviamos algo de JSON, que debe ser encadenado.method
es un método HTTP estándar. Puede ser POST
/ GET
/ DELETE
/ PUT
/ CONNECT
/ PATCH
/ TRACE
/ OPTIONS
.mode
se refiere a si se aceptan solicitudes de origen cruzado. Puede ser cors
/ no-cors
/ same-origin
.cache
se refiere a cómo el navegador interactuará con el caché. Puede ser default
/ no-cache
/ reload
/ force-cache
/ only-if-cached
.credentials
se refieren a si se deben enviar cookies de origen cruzado con la solicitud. Puede ser include
/ same-origin
/ omit
.headers
contiene cualquier encabezado asociado con la solicitud. Puede contener cualquier encabezado HTTP, por ejemplo, aquí muestra Content-Type
, pero también puede tener encabezados HTTP personalizados.redirect
determina qué sucede si la URL obtenida se redirige. Puede ser follow
/ error
/ manual
.referrerPolicy
determina cuánta información de referencia se pasa con la solicitud. Puede ser no-referrer
/ no-referrer-when-downgrade
/ origin
/ origin-when-cross-origin
/ same-origin
/ origen strict-origin
/ origen strict-origin-when-cross-origin
/ unsafe-url
. Cuando usamos fetch, va a la URL, recopila la información y nos proporciona una response
. Esto no es inmediato, ya que cargar la URL, descargarla y recuperarla lleva tiempo. Si simplemente ejecutamos fetch solo, un registro de la consola inmediatamente después solo devolverá una Promise
, no la response
de la URL que queremos:
let apiResponse = fetch("https://fjolt.com/api"); console.log(apiResponse); // Returns Promise<Pending>
Esto sucede porque se ejecuta la función fetch()
, pero Javascript no espera la response
. Como tal, tenemos que decirle explícitamente a Javascript que espere, si queremos acceder a la response
.
Hay dos formas de esperar a fetch()
:
then
y manipular la respuesta de nuestro fetch()
dentro de then()
.await
y esperar a que regrese la búsqueda antes de usar su contenido. El uso de then
se usa con frecuencia para capturar y procesar respuestas de fetch. El contenido de fetch()
se puede manipular dentro de la función de devolución de llamada then()
, pero no fuera de ella. Por ejemplo:
let apiResponse = fetch("https://fjolt.com/api").then(res => res.json()).then((data) => { console.log(data); // We can do anything with the data from our api here. return data; }); console.log(apiResponse); // This will return Promise<Pending> // That means we can't use the apiResponse variable // outside of the then() function.
Si queremos usar los contenidos de fetch()
fuera de then
, tenemos que usar await
.
La otra forma de esperar una búsqueda es usar la palabra clave await
. La mayoría de los navegadores modernos admiten esperas de nivel superior , pero si le preocupa la compatibilidad o si usa una versión de Node.JS anterior a la 14.8, querrá envolver cualquier código de await
dentro de una async function
.
Si usamos await, podemos usar la respuesta de nuestra API en cualquier parte de nuestra función o código, y usar cualquier función de response
, como text()
o json()
. Por ejemplo:
// Typically we wrap await in an async function // But most modern browsers and Node.JS support // await statements outside of async functions now. async getAPI() { let apiResponse = await fetch("https://fjolt.com/api"); let response = apiResponse.json(); // Since we waited for our API to respond using await // The response variable will return the response from the API // And not a promise. console.log(response); } getAPI();
Si desea obtener más información sobre las operaciones asíncronas, lea nuestro tutorial sobre Javascript asíncrono aquí .
En esta guía, hemos explicado cómo funciona la búsqueda. Hemos mostrado las diferentes opciones que puede enviar con sus solicitudes fetch()
y cómo esperar la respuesta usando conceptos asincrónicos en Javascript. fetch()
es una herramienta increíblemente poderosa en Javascript y se usa con frecuencia en grandes productos todo el tiempo. Espero que hayas disfrutado este artículo.