Objetivo
En este post se explica cómo utilizar el API Fetch para obtener un fichero json. Lo interesante de este ejemplo es cómo hay que
codificar las funciones, para que el orden en que se ejecutan las sentencias javascript sea el adecuado y de esta forma evitar asincronías no deseadas.
El API fetch es asíncrono, esto quiere decir que cuando se ejecuta, se lanza la petición y la ejecución continúa sin esperar a que el resultado haya sido recuperado. Si esta forma asíncrona de
funcionamiento no se tiene en cuenta, no hay garantía de obtener la respuesta adecuada. Es decir, si el proceso a realizar depende de los datos recibidos no se puede realizar dicho proceso hasta que
se haya recibido la respuesta.
Punto de partida
Ejemplo
Para ejecutar la prueba se usa el comando "node app.js". Este comando arranca la aplicación web que escucha en el puerto 3000
node app.js
Example app listening on port 3000!
Siguiendo la estructura de un proyecto node express, para dar respuesta a esta petición se crea el módulo app.js. Este módulo es el que arranca la aplicación y tiene codificada la ruta “/damepost”. Ver a continuación app.get. Aquí es donde se indica lo que la aplicación tiene que hacer cuando se escribe la petición http
http://localhost:3000/damepost
app.js
constexpress = 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}!`))
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 cuyo código de identificación es 1.
La solicitud se hace con await, es decir el control de ejecución para y espera hasta que response.json() termina para continuar.
Una vez que se dispone de response, se obtiene el fichero json con el método json(). Este método
también se invoca de forma síncrona con await. Por lo tanto, hagoFetch() no retorna la constante json hasta que no contiene todos los datos.
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.
