Espera un poco,

un poquiiiiiito máaaas...

BeerJS Córdoba
Agosto 2018

(Una introducción de telenovela

a la programación asincrónica

en JavaScript)

#JavaScriptFundamentals

Joel A. Villarreal Bertoldi

¿Por qué esperar?

Sincrónico

vs.

Asincrónico

Todas las instrucciones se ejecutan sucesivamente, una luego de la otra.

Sincrónico

vs.

Asincrónico

Todas las instrucciones se ejecutan sucesivamente, pero algunas pueden completarse en un futuro.

Podemos esperar a que algo
pase de distintas maneras.

Callbacks (browser)

$.getJSON('/my/data.json', {
  success: function () {
    // Yay!
  },
  error: function () {
    // :(
  }
});

// Life goes on...

Callbacks (node)

const fs = require('fs');

fs.readFile('/foo/bar', function (file) {
  // Hello callback!
});

fs.writeFile('/foo/bar', data, function () {
  // Problem?
});

Callback

/**
 * Una función A recibe como argumento
 * otra función B que será llamada
 * cuando A lo determine.
 **/

myFunc('foo', cb);

Callback hell

doSomething(data, function (results) {
  nextProcess(results, function (parsedData) {
    yetAnotherAction(parsedData, function (processed) {
      oneMoreAndFinished(processed, function (polished) {
        finish(polished, function (finished) {
          // Phew...
        });
      });
    });
  });
});

Promises

const axios = require('axios');

axios
  .get('/foo')
  .then(success)    // Yay!
  .catch(failure);  // :(

Promises

const axios = require('axios');

axios.get('/foo')
  .then(yayGet)
  .catch(booGet);

axios.post('/bar', { foo: 'foo!' })
  .then(yayPost)
  .catch(booPost);

¿Qué va a suceder primero?

Nested Promises?

const axios = require('axios');

axios.get('/foo')
  .then((data) => {
    axios.post('/bar', data)
      .then(yayPost)
      .catch(booPost);
  })
  .catch(booGet);

Promise "little hell"

const axios = require('axios');

axios.get('/foo')
  .then(data => axios.post('/bar', data))
  .then(response => axios.patch('/fiz', response))
  .then(magic => axios.delete('/magic', magic))
  .then(data => axios.post('/bar2', data))
  .then(response => axios.patch('/fiz2', response))
  .then(magic => axios.delete('/magic2', magic))
  .catch(boom);

Promise's Anatomy

const doHeavyAction = 
  (foo) => new Promise((resolve, reject) => {
    try {
      const bar = doSomethingComplicated(foo);
      resolve(bar);
    } catch (e) {
      reject(e);
    }
  });

doHeavyAction()
  .then(bar => console.log(bar));
  .catch(e => console.warn(e));

Esperando promesas

const dinnerActions = [
  chopVegetables,
  prepareWok,
  seasonFood,
  getWine,
  putTable
];

Promise.all(...actions)
  .then(result => shout("DINNER'S READY!"));
  .catch(result => callForPizza);

Promise[]

(porque podemos prender fuego la cocina, ¿vio?)

map, reduce ...

array magic!

Sincronizando lo asíncrono

class SinglePersonWhoCooks {
  async prepareVeggieWok() {
    try {
      await this.chopVegetables();
      await this.prepareWok();
      await this.seasonFood();
      await this.getWine();
      await this.putTable();
      return this.shoutReady();
    } catch (problem) {
      return this.callForPizza();
    }
  }
}

async/await

¿Qué conviene usar entonces?

Callbacks no.

¿Promises, async/await?

La verdad de la milanesa es...

...lo que consideres más legible, para que de acá a unos meses, entiendas qué quisiste escribir en tu código.

¿?