La API de nos permite crear una solicitud HTTP para que logremos una serie de cosas en , 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. fetch Javascript La función 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() fetch() Usando buscar en Javascript El uso más básico de fetch toma un argumento: la URL que queremos buscar. Dado que genera solicitudes HTTP, siempre tenemos que proporcionar una URL: fetch 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 para capturar la respuesta y hacer algo con ella. Lo bueno de la o respuesta devuelta es que tiene un montón de métodos integrados, que nos permiten analizar inmediatamente el contenido que obtenemos de : then() res fetch : devuelve el contenido de texto de una URL. Si es un sitio web, devuelve el HTML. res.text() : devuelve datos JSON formateados, si existen. res.json() : devuelve datos de blobs, si los hay. res.blob() - devuelve datos de arrayBuffer, si existe alguno. res.arrayBuffer() : devuelve datos de formData, si existen. res.formData() 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, 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 , podemos capturar la respuesta con otro , permitiéndonos descargar y devolver el contenido de la URL provista: res.text() res.text() then 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 contendrá un error. Por ejemplo, una página no encontrada devolverá , o un error de puerta de enlace incorrecta devolverá . response 404 502 Ejemplo 2: Obtener JSON a través de Javascript Fetch Si el contenido de una URL consiste en JSON, podemos usar . El siguiente código, por ejemplo, devolverá un objeto JSON desde la URL, suponiendo que la URL devuelva un JSON válido: res.json() 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, . Si ha trabajado con solicitudes HTTP antes, algunas pueden resultarle familiares. La función de que se muestra a continuación contiene todas las opciones posibles que puede usar: fetch(URL, { options }) fetch 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: contiene el cuerpo del texto. En este ejemplo, enviamos algo de JSON, que debe ser encadenado. body es un método HTTP estándar. Puede ser / / / / / / / . method POST GET DELETE PUT CONNECT PATCH TRACE OPTIONS se refiere a si se aceptan solicitudes de origen cruzado. Puede ser / / . mode cors no-cors same-origin se refiere a cómo el navegador interactuará con el caché. Puede ser / / / / . cache default no-cache reload force-cache only-if-cached se refieren a si se deben enviar cookies de origen cruzado con la solicitud. Puede ser / / . credentials include same-origin omit contiene cualquier encabezado asociado con la solicitud. Puede contener cualquier encabezado HTTP, por ejemplo, aquí muestra , pero también puede tener encabezados HTTP personalizados. headers Content-Type determina qué sucede si la URL obtenida se redirige. Puede ser / / . redirect follow error manual determina cuánta información de referencia se pasa con la solicitud. Puede ser / / / / / origen / origen / . referrerPolicy no-referrer no-referrer-when-downgrade origin origin-when-cross-origin same-origin strict-origin 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 . 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 , no la de la URL que queremos: response Promise response let apiResponse = fetch("https://fjolt.com/api"); console.log(apiResponse); // Returns Promise<Pending> Esto sucede porque se ejecuta la función , pero Javascript no espera la . Como tal, tenemos que decirle explícitamente a Javascript que espere, si queremos acceder a la . fetch() response response Hay dos formas de esperar a : fetch() Podemos usar y manipular la respuesta de nuestro dentro de . then fetch() then() Podemos usar y esperar a que regrese la búsqueda antes de usar su contenido. await Usando entonces para esperar una búsqueda en Javascript El uso de se usa con frecuencia para capturar y procesar respuestas de fetch. El contenido de se puede manipular dentro de la función de devolución de llamada , pero no fuera de ella. Por ejemplo: then fetch() then() 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 fuera de , tenemos que usar . fetch() then await Usando await para esperar una búsqueda en Javascript La otra forma de esperar una búsqueda es usar la palabra clave . La mayoría de los navegadores modernos admiten esperas de , 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 dentro de una . await nivel superior await 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 , como o . Por ejemplo: response text() json() // 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 y cómo esperar la respuesta usando conceptos asincrónicos en Javascript. 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. fetch() fetch()
