Ejemplo de llamada al api fetch síncrona

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.

1.  await fetch(….) no devuelve la constante response hasta que  fetch ha terminado.  
2.  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.