Tutorial Fetch API para principiantes: Cómo usar la API Fetch

Si está buscando una fácil introducción en el uso de la API de Fetch, un reemplazo moderno para las páginas basadas en XMLHTTPREQUEST basadas en AJAX, ¡este es el lugar inicial! Hoy, es seguro decir que la mayoría de las aplicaciones web (incluido PWA) hacen solicitudes de recursos desde caminar o dinámicamente. Esto a menudo se llama carga asincrónica de recursos. Esto es diferente de los recursos que se cobran cuando la página se cobra inicialmente. Los recursos asincrónicos se solicitan a pedido en circunstancias específicas y no requieren una carga de página completa. Como mencionamos, en la mayoría de los casos, este tipo de carga se realizó a través de AJAX, que utiliza una tecnología llamada XMLHTTPRequest para hacer llamadas de recursos asíncronos. En este tutorial, pasaré por el uso de la API de Fetch (oficial), que ahora tiene un excelente soporte para el navegador y lentamente comienza a reemplazar xmlhttprequest.

Fetch API #turial para principiantes: cómo usar #fetchapi
Haga clic en Tweet
Sintaxis básica para una solicitud de búsqueda de API para comenzar, ver un ejemplo simple de búsqueda de API, para que pueda comenzar a familiarizarse con la sintaxis básica:
fetch (url) .hen ((respuesta) => {return response.text ();}) .hen ((date) => {// haz algo con ‘data’);
Lenguaje del código: JavaScript (JavaScript) La primera línea en ese código usa el método Fetch (), que es un método del objeto de ventana en un entorno de navegador. Entonces podría escribir la primera línea de la siguiente manera:
Ventana. Fetch (URL)
El lenguaje del código: JavaScript (JavaScript) Fetch se puede usar en otros entornos, pero a los efectos de este tutorial API Fetch, me centraré en usar la API de Fetch en el navegador. El método Fetch () toma dos argumentos, pero solo uno es obligatorio: la ubicación del recurso solicitado. En el ejemplo anterior, supongo que en otra parte de mi código definí la ubicación de ese recurso en una variable llamada URL. A continuación se muestra una demostración de CodePen que utiliza la API de Fetch Interactive para solicitar un archivo externo y mostrar su contenido en la página: Use el botón de demostración para mostrar el contenido.
Observe el recurso que carga en la demostración de CodePen:
Fetch (‘https://codepen.io/impressivewebs/pen/kkvopdl.html’)
Lenguaje de código: JavaScript (JavaScript) es un archivo CodePen separado que he creado. CodePen le permite agregar .html, .css o .js a cualquier URL CodePen para solicitar el contenido de HTML, CSS o JavaScript de la pluma del origen de los cruces. ¡Así que es bastante útil! Intente cambiar la URL para solicitar CSS o JavaScript (es decir, usando kkvopl.css o kkvopdl.js al final de la URL) para ver los resultados.
Ahora que ha visto un ejemplo básico API para obtener un ejemplo básico, presentaré las diferentes partes de esa solicitud. El parámetro de la ubicación de los recursos como ya se discutió, el único argumento que es necesario al usar el método Fetch () es el recurso. Esto generalmente será una URL directa al recurso solicitado, pero también puede ser un objeto de solicitud. Todos los ejemplos que utilizaré en este tutorial incorporarán una referencia de URL directa, que es la forma más común de que se usará Fetch (). Veamos algunos ejemplos de uso de una URL directa a varias API gratuitas como recursos solicitados (es decir, los recursos que quiero “proceder”). Aquí hay una solicitud para algunos datos de baloncesto:
Fetch (‘https://www.balldontlie.io/api/v1/teams/28’)
Idioma de código: JavaScript (JavaScript) Aquí hay una solicitud de trabajos de JavaScript en el área de Nueva York:
Fetch (‘https://jobs.github.com/posses.json?decscription=javascript&location=new+york’)
Idioma de código: JavaScript (JavaScript) y aquí hay una solicitud de cerveza al azar:
Fetch (‘https://pi.punkapi.com/v2/beers/random’)
Idioma de código: JavaScript (JavaScript) Cualquiera de estas direcciones de URL se puede ver directamente en el navegador y todos involucran recursos de diferentes API gratuitas. Puede probar otras API gratuitas visitando este depósito de GitHub. Asegúrese de elegir uno que no necesite autenticación (es decir, tiene “no” en la columna “Auth”).
Las promesas devueltas en una solicitud API para obtener cada búsqueda () iniciar el proceso de solicitar un recurso y devolver una promesa. Una discusión detallada sobre JavaScript Promise no es el tema de este tutorial, pero cubriré lo suficiente para que trabaje con una búsqueda (). Según MDN, una promesa es un objeto que: […] representa la posible finalización (o falla) de una operación asincrónica y su valor resultante. Si tuviera que convertir una promesa a unas pocas oraciones en inglés, podría verse así: hacer algo. Cuando se haga ese “algo”, haz algo más. Por supuesto, esta es una simplificación excesiva, pero el concepto está más o menos allí. Básicamente, “promete” algo, luego respondes cuando ese “algo” se completa. Y debido a que esto se hace asincrónico, puede ejecutar otras líneas de JavaScript mientras la promesa está en proceso de cumplimiento. En el código que utilicé anteriormente, se devuelven dos promesas, una para cada llamada.
.hen ((respuesta) => {return response.text ();}) .sen ((date) => {// hacer algo con ‘data’);
Lenguaje de código: JavaScript (JavaScript) Estos métodos .shen () hacen lo que se llama cadena, lo que es posible y bastante común con las promesas. Como explica MDN: si la función ha pasado como controlador para entonces, devuelve una promesa, una promesa equivalente se expondrá a la siguiente, luego en la cadena de métodos. Entonces, para resumir ese ejemplo del código: “procesa” un recurso; “Entonces” devuelvo una respuesta; “Entonces” devuelve los datos después de leer la respuesta.
La respuesta prometida en una API de Fetch observa nuevamente en el ejemplo del código la siguiente sintaxis:
.Then ((respuesta) => {}
Lenguaje de código: JavaScript (JavaScript) Passse Inside .shen () es una función de flecha. El método .Then (), que es una característica de las promesas de JavaScript, toma un argumento llamado Función OnfullFilled. Esta es la función de flecha que se transmite como argumento. Esta función de flecha, a su vez, transmite lo que se llama objeto de respuesta. Cuando se cumple la promesa, el objeto de respuesta es lo que se devuelve, y se pasa de acuerdo con donde se puede manejar de varias maneras, lo que discutiré a continuación. Propiedades y métodos útiles de la respuesta. Hay una serie de propiedades y Métodos diferentes disponibles en el objeto de respuesta una vez que se recibe de la solicitud Fetch (). Aquí hay algunos útiles:
Respuesta.OK: esta propiedad devuelve un booleano que indica si la solicitud ha sido exitosa.
Respuesta.status: esta propiedad devuelve el código de estado de respuesta (por ejemplo, 200 para una solicitud exitosa).
Respuesta.URL: esta propiedad devuelve la URL de la solicitud. Normalmente, tendrá esto en el envío inicial de la solicitud, pero si la crea dinámicamente, esto podría ser útil.
Vea una lista completa de propiedades en este artículo de MDN.
También hay algunas formas útiles en que querrá familiarizarse:
Respuesta.Clone (): cree un clon del objeto de respuesta
Respuesta.Text (): devuelve los datos de la respuesta como un texto, que es útil para tomar HTML
Respuesta.json (): devuelve los datos de la respuesta como un objeto JSON válido, que es útil cuando se encuentra una cadena JSON.
Respuesta.Blob (): devuelve los datos como blob, que es útil para los datos en forma de referencia de archivo (como una URL de una imagen). De nuevo, puede ver una lista completa de métodos válidos en este artículo MDN. Al leer la respuesta, notará en mi ejemplo que incluyo dos métodos .shen () encadenados cuando trato con el contenido solicitado. El primer .Hen () es el lugar donde trato con la respuesta, y el segundo .shen () es el lugar donde trato con los datos después de haber sido leídos (generalmente por uno de los métodos mencionados en la sección anterior) . Una vez que se recibe la respuesta y elegí qué hacer con ella (por ejemplo, léala como un texto o como un objeto JSON), luego puedo moverla al siguiente. Cuando se cumple esa promesa posterior, puedo manipular los datos como deseo. Esto es similar a cómo AJAX las llamadas funcionan. Ya sea que trabajo con xmlhttprequest de AJAX o la API Fetch, una vez que recibí los datos en un formato útil en la página actual, puedo hacer con ellos lo que me gusta. ¿Cuándo se rechaza la solicitud de búsqueda de API? Una distinción importante a hacer al analizar las solicitudes de obtención de API exitosas y fallidas es cuando se tienen en cuenta los errores de red.
Cuando se realiza una solicitud de búsqueda (), si no se otorga el permiso del documento que inició la adquisición, entonces se considera una solicitud rechazada. Esto sucede a nivel de red. Sin embargo, si una solicitud de adquisición requiere contenido que no existe en el servidor, todavía se considera una solicitud exitosa, por lo que la promesa se considera que se cumple con éxito. Para ilustrar, eche un vistazo al siguiente CodePen: este es el mismo código que usé anteriormente, pero esta vez, en lugar de pedir otro documento de CodePen (que se me permite hacer en CodePen), trato de pedirle al inicio de CodeInwp. página. Esto no funciona porque no tengo permiso de CodeInwp.com para hacer solicitudes de Fetch o Ajax desde CodePen.com. Entonces, en este caso, la solicitud de API de Fetch se considera rechazada. Ahora observe el mensaje de error diferente que aparece al ver la siguiente demostración: tome la demostración API 404 Abra la consola del navegador para ver los mensajes mostrados. Aquí está JavaScript que uso para esa demostración:
fetch (‘https://www.impressiwebs.com/page-doesnt-exist’) .sen ((respuesta) => {console .log (‘Promise se completó’); return respuesta.status;}) .then (Then ( (status) => {console .log (‘Promise 2 fue completado’); documento .querySelector (‘.par’) .innerhtml = status; document .querySelector (.par ‘) .classList.add (‘ box ‘ );});
Idioma de código: JavaScript (JavaScript) El recurso que solicito no existe, pero tengo acceso al servidor desde el que solicito, porque está en el mismo origen. Para demostrar que se cumplen las promesas, muestro un mensaje de consola para cada uno. Pero notará que la consola del navegador también muestra un mensaje de error GET y el objeto de respuesta devuelve 404 para la propiedad de estado. Del mismo modo, si me conectara a Respuesta.Ok, recibiría un valor genérico falso, en lugar de un mensaje de estado específico. Sabiendo cómo funciona esto, puede hacer frente a las situaciones en las que no se encuentra el contenido, por ejemplo, proporcionando un mensaje de error personalizado en el primer .shen (): .hen ((respuesta) => {if (! Response.o) {tirar un nuevo error (“ http Error! Status: $ {Response.status} `);}})
Idioma de código: JavaScript (JavaScript) Aplicando la configuración personalizada a una solicitud de búsqueda de API Como mencionamos, el único argumento obligatorio cuando se usa Fetch () es la ubicación del recurso, generalmente una cadena en forma de URL relativa o absoluta. Pero Fetch () también le permite proporcionar un segundo argumento opcional, el inicial. Aquí hay un ejemplo que incluye algunas configuraciones posibles dentro de Init:
Fetch (URL, {Método: ‘Get’, Mode: ‘No-Cors’, Cache: ‘No-Cache’, referRerpolycy: ‘Same-Hourgig’})

Idioma de código: CSS (CSS) Puede ver una lista completa de configuraciones para el parámetro Init opcional en la sección de sintaxis del artículo MDN sobre Fetch (). Los que incluí arriba son algunos de los más comunes. Por ejemplo, el método me permite definir si la demanda es obtener o publicar (generalmente será un Get, lo cual es predeterminado). El modo me permite definir el tipo de solicitud. Podría establecer esto en “No-Cors”, lo que me permitiría solicitar un recurso desde cualquier lugar. Pero “No-Cors” significa que estoy limitado a lo que puedo hacer con el contenido. Por ejemplo, no puedo acceder a él con JavaScript, pero se puede usar en un agricultor de servicios. Finalmente, puedo definir una política de referencia, y la configuración de caché me permite definir un caché para el recurso solicitado. Estos son solo algunos ejemplos de las muchas configuraciones disponibles, pero no todos serán útiles en la mayoría de los ejemplos cuando usen la API de Fetch. Probablemente trabajará con solo uno o dos de ellos, o dejará el parámetro que obtenga y trabajará con los valores predeterminados. Solicitando datos de JSON a través de la API de Fetch como mencionamos anteriormente, hay una serie de servicios diferentes que le permiten solicitar datos a través de sus API. Tal servicio se llama Dog API, que se afirma que es “la colección más grande de perros de código abierto en Internet”. Usaré esa API para demostrar obtener datos JSON a través de la API de Fetch. Aquí está el código: fetch (‘https://dog.ceo/api/breeds/image/random’) .sen ((respuesta) => {return respuesta.json ();}) .sen ((mycentent) = > {myImage.src = mycentent [‘mensaje’];});
Idioma de código: JavaScript (JavaScript) Observe que la primera línea es la URL de la solicitud. Como se menciona en la documentación de la API del perro, puede usar su API para obtener una imagen aleatoria del perro. La respuesta que se devuelve está en formato JSON que se ve así: {“mensaje”: “https://images.dog.ceo/breeds/boxer/img_3394.jpg”, “status”: “éxito”}
Idioma del código: JSON / JSON con comentarios (JSON) Solo estoy preocupado por la URL que se encuentra en la propiedad “Mensaje”, por lo que tengo la siguiente línea en mi código:
myImage.src = mycentent [‘mensaje’];
El lenguaje del código: JavaScript (JavaScript) La variable myCentant se pasa en el segundo .shen .sen (), que ocurre después de que la respuesta se convierte en formato JSON usando el método .json () que mencioné anteriormente. Mientras tenga acceso a datos en formato JSON válido, desde allí puedo hacer lo que pueda hacer normalmente con JSON en JavaScript. Aquí hay una demostración de CodePen en vivo para que pueda probarla:
Use el botón en la demostración para solicitar una imagen del perro que se mostrará en la página. Utiliza un oyente de eventos para cambiar la imagen cada vez que hace clic el botón. Obtener la API en la asistencia de navegadores más antiguos para el navegador no debería ser un gran problema en la mayoría de los casos, pero si aún tiene que soportar la búsqueda en los navegadores más antiguos, hay algunas soluciones alternativas y polyfills. Puede verificar la existencia de Fetch usando algo como el siguiente código:
if (! (‘fetch’ en la ventana)) {// no disponible, use un polyfill} else {// fetch está disponible}
Lenguaje de código: JavaScript (JavaScript) y aquí hay algunos enlaces para obtener polyfills de API: UNTETCH-este es un polifilio mínimo por debajo de 500 bytes que funcionan en IE8+
Window.fetch Polyfill: implementa un subconjunto de la especificación de búsqueda estándar
Tenga en cuenta que si agrupa su aplicación usando algo como Parcel.js junto con su soporte construido para Babel, deberá incluir un complemento versátil separado si su configuración de Babel vuelve a la versión anterior de IE u otro navegador. que no aceptan la API Fetch.
Subir
Conclusión Hay muchos otros que podrían cubrirse cuando se trata de usar la API de Fetch y aún investigar las diferentes funciones. Pero eso debería darte un buen punto de partida. Espero que los ejemplos en esta publicación hayan sido útiles para obtener una comprensión general decente de cómo funciona la API de Fetch y cómo puede ser útil en aplicaciones dinámicas en lugar de Ajax antiguo. Vea múltiples de nuestros tutoriales de desarrollo web: Tutorial Webpack para principiantes CSS Grid para principiantes CSS Flexbox para principiantes Micro-Interacciones para desarrolladores principiantes para principiantes
Fetch API #turial para principiantes: cómo usar #fetchapi
Haga clic en Tweet
… Recuerde unirse a nuestro curso rápido para acelerar su sitio de WordPress. Con algunos remedios simples, puede reducir el tiempo de carga incluso en 50-80%:
Apariencia y presentación de Karol K.