Scribd
Cargar
72 vistas21 páginas

API Fetch

El documento describe la API fetch, la cual permite realizar peticiones asíncronas mediante promesas de forma flexible. Fetch devuelve un objeto Promise que contiene la respuesta como un objeto Response. Este objeto incluye el contenido de la respuesta y metadatos como la URL, cabeceras y estado HTTP. La API fetch puede usarse tanto en navegadores como en Node.js.

Cargado por

Alí Santiago López Zunún
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PPTX, PDF, TXT o lee en línea desde Scribd
72 vistas21 páginas

API Fetch

El documento describe la API fetch, la cual permite realizar peticiones asíncronas mediante promesas de forma flexible. Fetch devuelve un objeto Promise que contiene la respuesta como un objeto Response. Este objeto incluye el contenido de la respuesta y metadatos como la URL, cabeceras y estado HTTP. La API fetch puede usarse tanto en navegadores como en Node.js.

Cargado por

Alí Santiago López Zunún
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PPTX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 21

peticiones asíncronas mediante promesas

API fetch es un tecnología con un diseño moderno, basado


en promesas, con mayor flexibilidad y capacidad de control
a la hora de realizar llamadas al servidor, y que funciona
tanto desde window como desde worker, lo cual es cada
día más importante.

También está disponible en Node, por lo que podemos


utilizarlo de forma isomórfica, es decir, tanto en cliente
como en servidor.
Características

La función fetch es una función global que está


disponible en el objeto window del navegador.
Opción 1

El uso de fetch() más simple toma un argumento (la ruta del


recurso que quieres buscas) y devuelve un objeto Promise
conteniendo la respuesta (un objeto Response)

Promesas: devuelve un objeto con dos métodos, then() y catch() a la que


pasaremos una función que será invocada cuando se obtenga la respuesta o se
produzca un error.
• Para obtener el body o cuerpo del mensaje devuelto por el
servidor deberemos obtener una segunda promesa por medio de los
métodos del objeto Response.
• Bajo esta forma se considera que queremos utilizar el método GET
(valor por defecto)
Opción 2. Tipos de petición

La función fetch acepta un segundo parámetro mediante el


cual podemos personalizar la petición, pudiendo crear
peticiones GET, POST, PUT, PATCH, OPTIONS o
DELETE entre otros métodos HTTP.

Para ello debes especificar el método en la propiedad


method de este segundo objeto. Además también puedes
configurar las cabeceras mediante la propiedad headers y el
body mediante la propiedad body.
Petición POST en la que enviemos datos JSON
El objeto Response

Este objeto es el que devuelven las peticiones fetch(), incluyendo toda


la información acerca de la petición realizada y de la respuesta
obtenida.

El contenido o body de la respuesta que se obtiene, puede ser


contenido HTML, XML, JSON o cualquier otro contenido válido.
Para acceder al body existen los siguientes métodos:

text(): Devuelve el contenido como una cadena de texto plano.


json(): Devuelve el contenido como un objeto JSON ya parseado.
blob(): Devuelve el contenido como un objeto de tipo Blob.
formData(): Devuelve el contenido como un objeto de tipo formData.
arrayBuffer(): Devuelve el contenido como un objeto de tipo arrayBuffer.

Todos los métodos anteriores devolverán una promesa.


Metadatos
Además del contenido o body de la respuesta, también podrás acceder a una
serie de metadatos que se incluyen como parte de la respuesta

url
Mediante la propiedad url del objeto response podrás acceder a la URL de la
petición que acabamos de realizar.
Metadatos
headers
Mediante la propiedad headers del objeto response podrás acceder a las
diferentes cabeceras HTTP que se han obtenido como respuesta a la
petición.
Metadatos
status

Mediante la propiedad headers del objeto response podrás ver estado de


la respuesta HTTP que se ha obtenido como resultado de la petición.
El estado está representado por un número entero:

• Petición realizada correctamente: Estados 200 a 299.


• Respuesta informativa: Estados 100 a 199.
• Error en la petición (cliente): Estados 400 a 499.
• Error en la petición (servidor): Estados 500 a 599.
• Redirección: Estados 300 a 399.

lista completa de códigos de respuesta HTTP

https://developer.mozilla.org/es/docs/Web/HTTP/Status
Metadatos
statusText

Mediante la propiedad statusText del objeto response podrás acceder al


mensaje de estado que se ha obtenido junto con la respuesta. Si todo ha
ido bien, el mensaje será sencillamente OK, aunque es habitual
personalizarlo en el servidor cuando se envía algún tipo de error.
El objeto Request

El objeto Request se usa para representar la petición que queremos


realizar. Cuando usas la función fetch, en el fondo, siempre se crea un
objeto de este tipo aunque no lo definas tú de forma explícita. El
objeto Request incluye, diversas propiedades de solo lectura que te
permiten inspeccionar la petición:

• url: Contiene la URL de la petición.


• method: Contiene el método de la petición, ya sea GET, POST, PATCH o
cualquier otro.
• headers: Contiene las cabeceras de la petición.
• referrer: Contiene la página o recurso desde la que se realiza la petición.
• cache: El tipo de caché de la petición, de haberlo, cuyo valor puede ser
default, reload o no-cache, entre otros.
Ejemplos
• https://rickandmortyapi.com/

También podría gustarte