¿Cómo enstringr funciones asíncronas en JavaScript?

JavaScript es una función asíncrona de subproceso único, es una operación que consume mucho tiempo y se puede realizar sin bloquear otras operaciones del subproceso. Esto se puede hacer mediante código asíncrono como promesas o funciones asíncronas (que básicamente son promesas más limpias). Las funciones asíncronas son geniales, pero el momento de su ejecución no es seguro, esto a veces crea un problema, cuando tenemos dos funciones asíncronas que dependen una de la otra. 

Nota: este artículo utilizará funciones de ES2015+ como funciones asíncronas , funciones de flecha, etc. Sin embargo, se puede lograr el mismo resultado utilizando funciones de ES más antiguas.

Ejemplo 1: para ayudarnos con eso, tenemos tres funciones asíncronas (funciones de caja negra).

<script>
  async function getUserData() {
      console.log('Fetching data');    
  }
 
  async function cleanUserData(userData) {
      console.log('Cleaning data');     
  }
 
  async function saveToDataBase(userData) {
      console.log('Saving to DB');    
  }
  const userData = getUserData();
  const cleanedData = cleanUserData(userData);
  saveToDataBase(cleanedData);
</script>

Salida: Son funciones asíncronas y su tiempo de ejecución no siempre es el mismo. Por lo tanto, estas funciones pueden ejecutarse en cualquier orden posible. La siguiente es una salida posible.

Cleaning data
Saving to DB
Fetching data

Hay dos formas de ejecutar estas funciones para hacer cumplir un orden de ejecución de funciones.

1.Usando .then() de Promise  

<script>
async function getUserData() {
      console.log('Fetching data');    
  }
 
  async function cleanUserData(userData) {
      console.log('Cleaning data');     
  }
 
  async function saveToDataBase(userData) {
      console.log('Saving to DB');    
  }
  getUserData()
    .then((userData) => cleanUserData(userData))     
    .then((cleanedData) => saveToDataBase(cleanedData))
    .then(() => console.log('All work done'))       
 </script>

Producción:

Fetching data
Cleaning data
Saving to DB
All work done

Esto es bueno y funciona, pero a veces puede crear un infierno de devolución de llamada, lo que posiblemente arruine tu estado de ánimo cuando veas tu código (es broma).

2. Usando asíncrono / espera:

Hay una forma más limpia de hacer lo mismo, esperar a que una función complete su ejecución usando la palabra clave await . El await() funciona solo dentro de la función async() . Entonces, necesitamos envolverlos dentro de una función contenedora.

<script>
  async function getUserData() {
      console.log('Fetching data');    
  }
 
  async function cleanUserData(userData) {
      console.log('Cleaning data');     
  }
 
  async function saveToDataBase(userData) {
      console.log('Saving to DB');    
  }
  async function cleanAndSaveUserData() {
    const userData = await getUserData();
    const cleanedData = await cleanUserData(userData);
    await saveToDB(cleanedData);
     
    console.log('All work done');
  }
 
  cleanAndSaveUserData(); // does all the work
 
</script>

Producción:

Fetching data
Cleaning data
Saving to DB
All work done

Nota: Este artículo no cubre el manejo de errores en funciones async() enstringdas por simplicidad.