Javascript fetch get
En este artículo, aprenderás a utilizar la API Fetch, que es una envoltura basada en promesas alrededor del objeto XMLHttpRequest. Como verás, la API Fetch facilita el uso del objeto XMLHttpRequest en algunos aspectos, pero tiene algunos inconvenientes en lo que se refiere a la gestión de errores. Para facilitar el trabajo con la API Fetch, en este artículo se crea un conjunto de IIFEs (cierres). El uso de un cierre hace que su código sea más fácil de leer, depurar y reutilizar. No es necesario haber leído los artículos anteriores para seguir este. Sin embargo, el proyecto de la API Web .NET 5 se crea desde cero en el primer artículo, así que consulta ese artículo si quieres aprender a construir una API Web CRUD usando .NET 5.
La mejor manera de aprender a utilizar las tecnologías presentadas en este artículo es seguir y teclear los ejemplos. He creado una descarga con dos aplicaciones de partida, un proyecto de API web .NET 5 y un proyecto de servidor web (ya sea MVC o node). Descarga estos proyectos en www.pdsa.com/downloads y haz clic en el enlace titulado “CODE Magazine – How to Use the Fetch API (Correctly)”. Después de descargar el archivo ZIP, descomprímalo en una carpeta donde encontrará tres carpetas. La carpeta \Samples contiene las muestras terminadas tanto para MVC como para node. La carpeta \Samples-WebAPI es el proyecto de la Web API de .NET 5. La carpeta \Samples-Start contiene un proyecto MVC y otro node, uno de los cuales utilizarás para seguir este artículo.
¿Qué hace el método fetch ()?
fetch() El método global fetch() inicia el proceso de obtención de un recurso de la red, devolviendo una promesa que se cumple una vez que la respuesta está disponible. La promesa resuelve al objeto Response que representa la respuesta a su solicitud.
¿Por qué usamos entonces en Fetch?
entonces la llamada se adjunta directamente a fetch , de forma que cuando tenemos la respuesta, no espera a otros fetches, sino que empieza a leer . json() inmediatamente. Si utilizamos await Promise.
Node-fetch
El método fetch() tiene dos parámetros. La ruta al recurso es el primer parámetro y se requiere siempre, mientras que el parámetro init es opcional. A continuación, devuelve una promesa que se resuelve en un objeto de respuesta. El objeto de respuesta contiene además los datos que deben ser convertidos al formato requerido para poder trabajar con ellos. Sin embargo, debemos manejar los errores HTTP, ya que la promesa sólo rechaza los errores de red.Sintaxis:const response=fetch( URL [, init])URL: un objeto URL que representa la ruta del recurso a obtenerInit (opcional): Cualquier otra opción como:Ejemplo:1
Manejo de errores:Como ya hemos comentado, sabemos que los errores HTTP deben ser manejados utilizando las propiedades del objeto de respuesta Response.ok y Response.status. Response.ok es un valor booleano que nos permite saber si la respuesta fue exitosa o no, mientras que Response.status representa los códigos de estado HTTP, como 200 para éxito y 404 si el recurso no se encuentra. Observa el siguiente objeto de respuesta:Solicitud GET utilizando el método fetch():Veamos un ejemplo sencillo de obtención de una imagen que facilite la comprensión del concepto. Los pasos a seguir serán:Código:1
Reacción de Fetch
¡Es un poco como la definición de Ajax! Pero fetch está construido sobre el objeto Promise, lo que simplifica mucho el código, especialmente si se utiliza junto con async/await. También se podrían utilizar promesas con el objeto XMLHttpRequest, pero esto, sumado al código ya más complejo de Ajax, produciría un programa mucho más grande.
Fetch es compatible con todos los navegadores recientes, incluido Edge, pero no con Internet Explorer. Por lo tanto, si buscas la máxima compatibilidad, seguirás utilizando Ajax para actualizar una página web. Si también quieres interactuar con el servidor, el objeto WebSocket también es más apropiado que fetch. En otros casos, fetch ofrece una gran simplicidad para cargar contenido en una página, como veremos con las siguientes demostraciones.
En el caso de una imagen, fetch devuelve un blob con el método blob (). Mientras que la etiqueta img requiere que se asigne una URL al atributo src. Por tanto, convertimos el contenido obtenido por fetch en URL con el método createObjectURL de URL.
Javascript fetch await
Como el resultado de un fetch es asíncrono, podemos usar then() para capturar la respuesta, y hacer algo con ella. Lo mejor de la respuesta devuelta es que tiene un montón de métodos incorporados, que nos permiten analizar inmediatamente el contenido que obtenemos de fetch:
Dado que diferentes URLs producen diferentes tipos de contenido, los métodos anteriores nos permiten analizar ese contenido de la manera que queramos. Para entender cómo funciona todo esto, veamos dos ejemplos muy comunes.
Como se ha mencionado anteriormente, res.text() nos da el contenido de texto de una URL – por lo que podemos utilizarlo para obtener todo el contenido HTML de una URL. Una vez que atrapamos nuestra respuesta usando res.text(), podemos atrapar la respuesta con otro entonces, permitiéndonos descargar y devolver el contenido de la URL proporcionada:
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 has trabajado antes con peticiones HTTP, algunas te resultarán familiares. La función fetch que se muestra a continuación contiene todas las opciones posibles que puedes utilizar:
