Cómo utilizar Fetch API

Cómo utilizar Fetch API

Utilice el botón de demostración para ver el contenido.

Tenga en cuenta el recurso que estoy cargando en la demostración de CodePen:

fetch('https://codepen.io/impressivewebs/pen/KKVopdL.html')

Este es un archivo CodePen separado que creé. CodePen le permite agregar .html, .css o .js a cualquier URL de CodePen para solicitar el contenido HTML, CSS o JavaScript de ese lápiz, lo cual es útil cuando se usan solicitudes de Ajax o Fetch API para no ser molestado por la cruz límites de origen. ¡Por tanto, es muy útil! Intente cambiar la URL para solicitar CSS o JavaScript (es decir, utilizando KKVopdL.css o KKVopdL.js al final de la URL) para ver los resultados.

Ahora que ha visto un ejemplo básico de Fetch API, lo guiaré a través de las diferentes partes de esta solicitud.

El parámetro de ubicación del recurso

Como ya se discutió, el único argumento requerido cuando se usa el fetch() el método es Recurso. Por lo general, será una URL directa al recurso solicitado, pero también puede ser una Objeto de la solicitud. Todos los ejemplos que usaré en este tutorial incorporarán una referencia de URL directa, que es la forma más común que verá fetch() usado.

Veamos algunos ejemplos que usan una URL directa a varias API gratuitas como recursos solicitados (es decir, los recursos que quiero “tomar”).

Aquí hay una solicitud de datos de baloncesto:

fetch('https://www.balldontlie.io/api/v1/teams/28')

Aquí hay una aplicación para trabajos de JavaScript en el área de Nueva York:

fetch('https://jobs.github.com/positions.json?description=javascript&location=new+york')

Y aquí hay una solicitud de una cerveza al azar:

fetch('https://api.punkapi.com/v2/beers/random')

Cada una de estas URL se puede ver directamente en su navegador y todas involucran recursos de varias API gratuitas. Puede probar otras API gratuitas visitando este repositorio de GitHub. Solo asegúrese de elegir uno que no requiera autenticación (es decir, que tenga “No” en la columna “Auth”).

Promesas devueltas en una solicitud de Fetch API

Cada fetch() El método comienza el proceso de solicitar un recurso y devuelve una promesa. Una discusión detallada de Promesas de JavaScript está fuera del alcance de este tutorial, pero cubriré lo suficiente para que trabajes con fetch().

Según MDN, una promesa es un objeto que:

[…] representa la eventual finalización (o falla) de una operación asincrónica y su valor resultante.

Si tuviera que convertir una promesa en unas pocas oraciones en inglés, podría verse así:

Hacer algo. Cuando ese “algo” esté hecho, haga otra cosa.

Por supuesto, eso es una simplificación excesiva, pero el concepto está más o menos ahí. Básicamente, “prometes” algo y luego respondes cuando ese “algo” está hecho. Y dado que esto se hace de forma asincrónica, puede ejecutar otras líneas de JavaScript mientras se cumple la promesa.

En el código que usé anteriormente hay dos promesas devueltas, una para cada .then() llamada al método:

.then((response) => { return response.text(); }) .then((data) => { });

Estos .then() los métodos hacen lo que se llama encadenamiento, lo cual es posible y bastante común con las promesas. Como explica MDN:

Si la función se pasa como administrador a then devuelve un Promise, un equivalente Promise será exhibido a continuación then en la cadena de métodos.

Entonces, para resumir este ejemplo de código: estoy “obteniendo” un recurso; ‘entonces’ devuelvo una respuesta; ‘luego’ devuelvo los datos después de leer la respuesta.

La respuesta de Promise en una API de Fetch

Observe nuevamente en el código de muestra la siguiente sintaxis:

.then((response) => { }

Pasado dentro del .then() El método es una función de flecha. los .then() , que es una característica de JavaScript Promises, toma un argumento llamado onFullfilled función. Es la función de flecha la que se pasa como argumento. Esta función de flecha, a su vez, pasa a lo que se llama Asunto de respuesta.

Cuando se cumple la promesa, el objeto Response es lo que se devuelve y se pasa a la función desde donde se puede manejar de varias maneras, de las que hablaré a continuación.

Propiedades y métodos útiles del objeto de respuesta

Hay varias propiedades y métodos diferentes disponibles en el objeto de respuesta una vez que se recibe del fetch() petición. A continuación se muestran algunos útiles:

  • Response.ok : Esta propiedad devuelve un valor booleano que indica si la solicitud se realizó correctamente.
  • Response.status – Esta propiedad devuelve el código de estado de la respuesta (por ejemplo 200 para una solicitud exitosa).
  • Response.url : Esta propiedad devuelve la URL de la solicitud. Normalmente tendría esto cuando envíe la solicitud por primera vez, pero si está creando la solicitud de forma dinámica, puede ser útil.

Ver una lista completa de propiedades en este artículo de MDN.

También hay algunos métodos útiles con los que querrá familiarizarse:

  • Response.clone() – Crea un clon del Response objeto
  • Response.text() – Devuelve los datos de respuesta como texto, lo cual es útil al buscar HTML
  • Response.json() – Devuelve los datos de respuesta como un objeto JSON válido, lo que resulta útil al recuperar una cadena JSON.
  • Response.blob() – Devuelve datos como blobs, lo que resulta útil para los datos en forma de referencia de archivo (como una URL de imagen).

Nuevamente, puede ver una lista completa de métodos válidos en este artículo de MDN.

Lee la respuesta

Notarás en mi ejemplo que incluyo dos encadenados .then() métodos al procesar el contenido solicitado. La primera .then() aquí es donde trato con el objeto de respuesta y el segundo .then() Aquí es donde proceso los datos después de leerlos (generalmente a través de uno de los métodos mencionados en la sección anterior).

Una vez que se recibe la respuesta y he elegido qué hacer con ella (por ejemplo, leerla como texto o como objeto JSON), puedo pasarla a la siguiente función en la siguiente .then() llamada. Cuando se cumpla esta promesa posterior, puedo manipular los datos como desee.

Esto es similar a cómo funcionan las llamadas Ajax. Que trabajo con el Ajax XMLHttpRequest o la API Fetch, una vez que recibo los datos en un formato utilizable en la página actual, puedo hacer lo que quiera con ellos.

¿Cuándo se considera rechazada una solicitud de Fetch API?

Una distinción importante que se debe hacer al examinar las solicitudes de Fetch API exitosas y no exitosas es considerar errores de red y errores HTTP.

Al realizar una fetch() solicitud, si no se otorga permiso al documento que inició el pago, se considera una solicitud rechazada. Esto sucede a nivel de red. Sin embargo, si una solicitud de recuperación solicita contenido que no existe en el servidor, todavía se considera una solicitud exitosa, por lo que la promesa se considera exitosa.

Para ilustrarlo, eche un vistazo al siguiente CodePen:

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Ir arriba