API Fetch JavaScript
Conceptos básicos
Proyecto Informático - UPSO
Prof. Carlos Berger
¿Qué es?
Es una interfaz para recuperar recursos, particularmente a través de la
red.
Anteriormente, se utilizaba XMLHttpRequest, pero esta nueva versión
posee características más potentes y es más flexible.
Proyecto Informático - Prof. Carlos Berger
Conceptos
La API ofrece una definición genérica de los objetos
Request: solicitud de respuesta
Propiedades y métodos : method, url, headers, context, …
body (blob, formData, json, text)
Response: representa la respuesta a una petición
Propiedades y métodos : headers, ok, status, statusText, type, url
body (blob, formData, json, text)
error
Proyecto Informático - Prof. Carlos Berger
Conceptos
REQUEST
Permite definir una configuración más específica de la solicitud
method: GET - POST - PUT - DELETE - PATCH - HEAD …
url: URL del recurso
headers: ej, Content-Type, Authorization, Accept, …
[Link]
mode: cors, no-cors, same-origin
…
Proyecto Informático - Prof. Carlos Berger
Conceptos
REQUEST
El único parámetro obligatorio es la url, y cada una de las propiedades se
convierte en sólo lectura una vez creada la instancia.
Dado que las demás propiedades son también aceptadas en el constructor
de la clase Fetch, habitualmente no será necesario definir un objeto Request
para usar la API.
Usaremos la sintaxis:
fetch ( url, requestOptions) …
donde el objeto requestOptions incluirá las propiedades
adicionales de la petición.
Proyecto Informático - Prof. Carlos Berger
Conceptos
El método fetch tiene un argumento obligatorio: la url de acceso al recurso
que se desea recuperar.
Devuelve una Promesa (Promise), que se resuelve en respuesta (Response)
a esa petición, sea o no correcta.
Promise: es un objeto que representa la eventual conclusión (o falla) de una
operación asincrónica y su resultado.
Es una forma de prepararse para recibir un valor aún no conocido en el
momento en el que se crea la promesa, lo que permite asociar manejadores
para las eventuales situaciones que ocurran con una acción asincrónica.
Proyecto Informático - Prof. Carlos Berger
Conceptos
Una Promise estará en uno de estos estados:
- Pending (pendiente): es el estado inicial, sin haberse completado ni
fallado.
- Fullfilled (completada): indica que la operación se completó
exitosamente.
- Rejected (rechazada): indica que la operación falló.
Una promesa pendiente puede cumplirse con un valor o rechazarse con un
motivo (error).
Una Promise se dice que ha sido establecida si se cumple o se rechaza, pero
no está en estado pendiente.
Proyecto Informático - Prof. Carlos Berger
Conceptos
Cuando una promesa se cumple o se rechaza, se invoca a los controladores
asociados en cola.
.then(): toma hasta dos argumentos, el primero es una función de
devolución de llamada para el caso resuelto, y el segundo para el caso
rechazado.
[Link]( manejadorResuelto, manejadorRechazado)
Cada then devuelve a su vez un objeto Promise, que puede ser
encadenado.
Proyecto Informático - Prof. Carlos Berger
Conceptos
El anidamiento, encadenamiento y manejo de errores en cada then tiene
consecuencias en la cadena de promesas, por lo que inicialmente veremos
una estructura más sencilla.
promesa1
.then( (valor) => { [Link](“Promesa resuelta con “, valor})
.catch( (error) => { [Link](“Promesa rechazada por” , error})
.finally( () => { [Link](“Promesa finalizada (resuelta o rechazada”})
Proyecto Informático - Prof. Carlos Berger
Conceptos
Un ejemplo:
let promesa1 = new Promise((resolve, reject) =>{
setTimeout( function() {
// invocamos a resolve si todo funcionó
// o invocamos a reject si hubo un error
}, 500 )
})
No podemos ejecutar código JS directamente en VSC, necesitamos una
herramienta adicional. Ej: [Link]
Proyecto Informático - Prof. Carlos Berger
Conceptos
Volviendo a fetch:
fetch ( url, requestOptions)
.then( response => { // manejador de promesa resuelta})
.catch( error => { // manejador de promesa rechazada}
.finally( () => { // tareas de limpieza, reinicialización de variables, etc})
Proyecto Informático - Prof. Carlos Berger
Conceptos
Nuestro principal interés es el uso de fetch para recuperar recursos a través
de una API REST, cuyos detalles veremos en breve.
Por el momento, lo que nos interesa es definir el formato de intercambio de
archivos: JSON (JavaScript Object Notation)
- Es texto plano
- Es independiente del lenguaje
- Es autodescriptivo
- El formato de texto es siempre válido en un sistema de almacenamiento
de archivos
. Se puede recibir texto puro desde un servidor y usarlo como un objeto JavaScript
. Se puede enviar un objeto JavaScript a un servidor en formato de texto puro
. Se puede trabajar con datos como objetos JavaScript, sin complicaciones de mapeos.
Proyecto Informático - Prof. Carlos Berger
Resumen - USO de fetch en forma genérica (API externa)
fetch ( url, requestOptions)
.then( response => { return [Link]() })
.then( dataJson => {
// acceso a la respuesta en formato JSON
})
.catch( error => { // manejador de promesa rechazada}
.finally( () => { // tareas de limpieza, reinicialización de variables, etc})
Proyecto Informático - Prof. Carlos Berger
Resumen - USO de fetch simplificado - API propia
Convención: todas las respuestas del backend devuelven JSON, incluso si hay
errores. Cada situación se procesa de acuerdo a su código HTTP
fetch ( url, requestOptions)
.then( handleResponse) // manejador de respuesta genérico para todas las peticiones
.then( dataJson => {
// acceso a la respuesta en formato JSON, diferente para cada recurso
})
.catch( error => { // manejador de promesa rechazada}
.finally( () => { // tareas de limpieza, reinicialización de variables, etc})
Proyecto Informático - Prof. Carlos Berger