Sincrono/Asincrono - Fetch concepto

Question

Tengo una duda en cuanto al concepto de sincrono/asincrono con fetch, por ejemplo yo tengo un sitio que quiere consumir una api externa, en este sitio tengo:

  <h1>Titulo</h1>
  <p> **aca va el parrafo que consumo de una api externa** </p>
  <footer> pie de pagina</footer>

El codigo no es importante lo pongo a modo de ejemplo, entonces...

CASO SINCRONO : suponiendo que la api externa falla o no se encuentra disponible o tiene un delay demasiado largo, de forma sincrona se cargaria h1 ,pero se quedaria en la etiqueta p y nunca se mostraria el footer.

CASO ASINCRONO : suponiendo que la api externa falla o no se encuentra disponible o tiene un delay demasiado largo, de forma asincrona se cargaria h1 ,pasaria de la etiqueta p (por que espera una promesa) continua y se mostraria el footer.

Primera pregunta- ¿Lo estoy entendiendo bien o estoy equivocado?

Segunda pregunta- ¿fetch me realiza esta tarea de forma asincrona? o necesita la sintaxis de async/await? por q no entiendo si async/await es solo una manera mas corta y prolija que realizarlo, en lugar de unicamente con fetch utilizar promesas tras promesas, basicamente quiero saber, si es lo mismo utlizar fetch o utilizar fetch con async/await.

Solo necesito entender mis dudas en cuanto a las 2 preguntas que planteo, porque no se si estoy entendiendo el concepto correctamente.

Answer 1

Voy a comenzar por suponer que estas trabajando con javascript sin librerías, porque si trabajas con librerías como React el comportamiento del DOM cambiaria.

Para explicarlo, primero tienes que entender como funciona el navegador:

El DOM (los tags de html) se pre-cargan primero en el navegador tal y como están en el html. Luego javascript actúa sobre ellos junto a las hojas de estilo (css), y finalmente son renderizados y mostrados al usuario.

En este proceso el código de JavaScript se ejecuta de forma síncrona(secuencial), por lo cual la pagina se renderizaría antes de que fetch(una funcion asíncrona) sea capaz de entregar la respuesta, esto quiere decir que <footer> si se renderizaría, sin embargo <p> quedaría vacío.

En resumen, que una función sea asíncrona no quiere decir que el hilo de ejecucion vaya a esperar que dicha función tenga una respuesta, si no que la va a ejecutar "paralelamente" dentro del mismo hilo y continuar con la siguiente instrucción.

Para esto de las API, javascript nos presenta el siguiente event listener (entre otros): document.addEventListener('DOMContentLoaded', ()=>{}); que es una funcion(callback) que se ejecuta de manera automática una vez que el DOM ya ha sido renderizado.

Ejemplo simplificado:

document.addEventListener('DOMContentLoaded', ()=>{
  fetch('http://localhost:3000/api').then(respuesta=>{
    document.getElementById('id_del_elemento').innerHTML(respuesta) //agrega respuesta al DOM
  }).catch(error=>{
    console.log(error)
  })
});

El termino async/await dicho de manera simple es una forma alternativa de realizar promesas que se implemento con la llegada ECMAScript.