Cómo obtener datos en Javascript como un profesional

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() .

Usando buscar en Javascript

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.

Ejemplo 1: Obtener contenido HTML de un sitio web mediante la búsqueda de Javascript

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 .

Ejemplo 2: Obtener JSON a través de Javascript Fetch

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

Opciones para la recuperación de Javascript

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 .

Recuerde, la búsqueda de Javascript es asíncrona

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() :

• Podemos usar then y manipular la respuesta de nuestro fetch() dentro de then() .
• Podemos usar await y esperar a que regrese la búsqueda antes de usar su contenido.

Usando entonces para esperar una búsqueda en Javascript

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 .

Usando await para esperar una búsqueda en Javascript

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í .

Conclusión

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.