Objetivo
En este post se explica cómo se
puede utilizar fetch para obtener un fichero json que está en la red y
mostrarlo mediante un browser. Lo interesante es el ejemplo de cómo hay que
codificar las funciones, para que el orden en que se ejecutan las sentencias
javascript sea el adecuado, salvando las asincronías,
El api fetch es asíncrono, esto
quiere decir que cuando se ejecuta, se lanza la petición del fichero json y la
ejecución continúa sin esperar a que se recupere el fichero. Si esto no se
tiene en cuenta, no tendremos garantía de obtener la respuesta adecuada, puesto
que lo que queremos es mostrar dicho fichero en la ventana del browser y hasta
que no tengamos el fichero no podremos presentarlo.
Punto de partida
Se usa el API REST en https://jsonplaceholder.typicode.com/
, es un api suministrado de forma
gratuita para poder realizar pruebas.
Se ha de iniciar un proyecto node
express (https://expressjs.com/en/starter/hello-world.html). Este framework se usa para construir la
aplicación. Mediante la aplicación se arranca un servidor que resuelve
peticiones por el puerto 3000.
Ejemplo
Se prepara una aplicación que una
vez arrancada con node app.js, se queda esperando peticiones de la siguiente
manera:
node app.js
Example app listening on port 3000!
Una vez arrancado el servidor, en una ventana del browser escribir
http://localhost:3000/damepost
Para dar respuesta a esta
petición hemos escrito un módulo app.js, que es el que arranca la aplicación y
tiene codificada la ruta “/damepost”. Ver a continuación app.get.
app.js
const express = require('express')
const app = express()
const port = 3000
const f = require('./functionsRefactored.js')
app.get('/damepost', async (req, res) => res.send(await f.hagoFetch()))
app.listen(port, () => console.log(`Example app listening on port ${port}!`))
Cuando se realiza la petición http://localhost:3000/damepost, la
aplicación llama a la función
async (req, res) => res.send(await f.hagoFetch())
Esta arrow function llama a
hagoFetch(). Esta función está exportada desde el módulo functionsRefactored.js
que se muestra a continuación.
functionsRefactored.js
fetch = require('node-fetch');
async function hagoFetch() {
const response = await fetch('https://jsonplaceholder.typicode.com/posts/1')
.catch(error =>{console.error(error)})
const json = await response.json();
return json
}
exports.hagoFetch=hagoFetch;
En hagoFecth se solicita el fichero json que devuelve todos los posts del usuario cuya identificación es 1. La solicitud se hace con await, es decir de forma síncrona. Hasta que no se dispone de la respuesta la ejecución no continua con la siguiente sentencia.
Una vez que disponemos de la
respuesta, podemos extraer el fichero json con el método json(). Este método
también lo invocamos de forma síncrona con await.
Resumen
Convertir en síncrona la petición
fetch, se ha conseguido mediante dos llamadas con await.
- await fetch(….) no devuelve la constante response hasta que fetch ha terminado.
- await response.json() no devuelve la constante json hasta que la función ha terminado.
Para poder hacer await dentro de la función hagoFetch() se ha tenido que declarar como función
async.
A su vez la llamada a la función hagoFetch
en app.js se hace con await. Para poder hacer await la arrow function de app.get
para la ruta /damepost está declarada
como async.
Espero que esto sea de utilidad para
alguien por ahí que se esté pegando con fetch y la asincronía. Si tenéis alguna
duda dejad un comentario.
No hay comentarios:
Publicar un comentario