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
[Link]
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
• [Link]