Puesto de recogida de Javascript
El método fetch() devuelve una Promise. Podemos manejar las respuestas de la API encadenando los métodos Promise.then() y Promise.catch() con él. Vamos a pasar el objeto de respuesta a nuestra función de callback Promise.then(), y a registrarlo en la consola.
Para obtener nuestros datos de la API como texto o un objeto JSON, podemos utilizar uno de los dos métodos nativos del objeto Fetch: Body.text() y Body.json(). El método Body.text() obtiene los datos del cuerpo como una cadena de texto, mientras que el método Body.json() los obtiene como un objeto JSON. Ambos devuelven una Promise.
Sin embargo, la Promise sólo rechaza y activa el método Promise.catch() si la solicitud no se resuelve. Si hay una respuesta del servidor, incluso si es un error 404 o 500, los métodos Promise.then() siguen ejecutándose.
Mientras que eso desencadena el manejador Promise.catch(), el parámetro de error es el objeto de respuesta. A veces, el código de estado de la respuesta o el texto del estado de la respuesta es todo lo que necesitas. Pero a menudo, los detalles sobre el error están en el cuerpo de response.body.
En lugar de ejecutar inmediatamente throw, puedes devolver response.json() o devolver response.text() con una función Promise.then() encadenada. Dentro de su función callback, lanza el JSON o el texto analizado para activar el método Promise.catch(), con los datos del error como argumento del mismo.
Mdn fetch
Es el sucesor de XMLHttpRequest que es una alternativa mejor (y moderna) para comunicarse con recursos de forma remota a través de la red. Puede realizar todas las tareas que XMLHttpRequest era capaz de realizar.
Así que lo que aprendí con el tiempo al trabajar en proyectos en general es que buscar la perfección no es la solución para lograr el éxito. No hay una solución perfecta. Pero una buena manera de llegar muy lejos en la vida es trabajar con inteligencia.
Un directivo de mi empresa (que está especializado en una habilidad ajena a la informática) aplaudió hace poco a un empleado de otro departamento que puso en marcha rápidamente un sitio web que rinde mucho. Ese empleado utilizó wordpress. Trabajó de forma inteligente.
Deberías estar familiarizado con el objeto Request y Response con el que se comunica el objeto fetch. Cuando trabajas con estos dos objetos en realidad estás golpeando muchos pájaros de un tiro, porque a medida que te aventures en el mundo real te darás cuenta de que estos dos objetos son imitados o reutilizados en frameworks como las funciones de Gatsby, el servidor de desarrollo en webpack, las bibliotecas nativas en Node.js utilizan esta interfaz también en su módulo http.
Fetch api react
Digamos que tienes unas cuantas páginas: una página de inicio, una página sobre y una página que muestra fotos de gatos. Ahora quieres mostrar un mensaje de bienvenida en cada página. En otras palabras, quieres añadir esto en la parte superior de cada archivo .html:
Podría hacerlo manualmente editando cada archivo .html y copiando esto en él. Eso podría estar bien para tres archivos, pero ¿qué pasa si tiene una docena de páginas? ¿O cien? ¿Qué pasa cuando quieres cambiar el mensaje a otra cosa?
Sería bueno si usted pudiera poner su mensaje en un solo lugar que cada archivo .html lee de. Entonces, cuando quiera cambiar el mensaje, podría cambiarlo en un solo lugar en lugar de cambiarlo en cada archivo individual.
La función fetch() le permite cargar otros archivos en Internet, pero no funciona con archivos locales cargados usando URLs file://. Esto es una característica de seguridad. Imagínate el miedo que daría Internet si cualquier sitio web pudiera leer los archivos de tu ordenador.
Las funciones también pueden ser asíncronas, lo que significa que ocurren “entre bastidores” mientras el resto de tu código sigue ejecutándose. Esto es útil para acciones que pueden tardar mucho tiempo en completarse, como la obtención del contenido de una URL.
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
