Imagina que tienes que invocar a una función que va a tardar en responder. Pero necesitas su respuesta para poder invocar otra a continuación, pues la segunda necesita como parámetro lo que ha producido la primera. Por ejemplo, la primera podría descargar una página Web, extraer de ella una URL y la segunda necesitar ésta URL para acceder a otro recurso.

Usando código síncrono, todo se entiende fácilmente

    function main() {
        r1 = serv1(parametros);
        r2 = serv2(r1);

        // Lo anterior también se podría haber escrito r2 = serv2(serv1(parametros))
        console.log("Resultado final: " + r2);
    }

pues suponemos que las llamadas a `serv1()` y `serv2()` se hacen de forma síncrona, es decir, que hasta que esas funciones no tengan su respuesta la ejecución no continuará por la línea siguiente. Este tipo de código es fácil de escribir y comprender, pero es muy ineficiente. Se supone que el tiempo que tardan `serv1()` y `serv2()` en obtener su respuesta es mayormente tiempo de espera (comunicaciones de red, por ejemplo), tiempo durante el cual el hilo está detenido esperando la respuesta, y que podría haber aprovechado haciendo otra cosa. De hecho, en JavaScript este hilo es el que se ocupa de interactuar con el DOM y con el usuario, por lo que la página quedaría como "colgada" este tiempo. Y si el tiempo es excesivo, el Navegador acabará por detectar que el hilo no está procesando los eventos de la GUI y sacará un aviso del estilo "Un script en esta página está tardando demasiado. ¿Deseas abortarlo?"

La solución es hacer uso de versiones asíncronas de estas funciones. Llamémoslas `asinc1()` y `asinc2()`. Estas funciones retornan inmediatamente en el hilo principal, pero dejan "encargado" al Navegador que en otro hilo (dedicado a comunicaciones de red) haga las peticiones correspondientes. El problema es ¿qué ocurre una vez que esas peticiones se han completado? ¿A dónde va a parar la respuesta? Ya que necesitamos la respuesta de `asinc1()` antes de poder invocar `asinc2()` ¿cómo se entera el hilo principal de cuándo terminó `asinc1()` y cuál ha sido el resultado?

Hay dos posibles implementaciones para resolver este problema:

* _Callbacks_. La llamada asíncrona recibe como parámetro una función. Cuando el resultado esté disponible, invocará a esa función pasándole como parámetro el resultado. Esta forma hace en muchas ocasiones el código ilegible ,esto se conoce como ***Callback Hell***
* [_Promises_][1]. La llamada asíncrona retorna como resultado "provisional" una Promise. Este es un objeto que contendrá en el futuro el resultado. Este objeto tiene una serie de métodos bien definidos que permiten consultar su estado (si ha sido resuelta o aún no, si han habido errores), asignarle un estado (cosa que hará la función asíncrona cuando obtenga el resultado), e incluso asignarle una función a modo de _callback_ que será invocada cuando el estado de la Promise se resuelva.

La primera solución (_callbacks_) es más directa, pero da lugar a un código más anidado, como puedes ver en el siguiente ejemplo:


    // Versión asíncrona. Se supone que asinc1() y asinc2() son funciones que admiten 
    // un callback como parámetro, al cual llamarán pasándole el resultado
    function main() {
        asinc1(parametros, function(r1){
            // Tenemos el resultado de asinc1
            asinc2(r1, function(r2) {
                console.log("Resultado final: " + r2);
            });
        });
    }

La anidación sería peor a medida que tengamos más funciones encadenadas (que se necesite el resultado de una para llamar a la siguiente). Por otro lado, en este código todo está "al revés" de algún modo, pues las funciones no retornan resultados, sino que pasan esos resultados como parámetros (a otras funciones).

Las Promises evitan esta anidación, y hacen más simple el manejo de errores (cosa en la que no entro en esta respuesta). Una Promise tiene un método `then()` al que le pasas una función, que será ejecutada automáticamente cuando la promesa se resuelva (o inmediatamente si ya estaba resuelta en el momento en que invocamos `.then()`). Esta función recibirá como parámetro el valor de la promesa (el resultado esperado). Y lo mejor es que `.then()` retorna a su vez una nueva Promise, que se resolverá cuando se ejecute la función que le habíamos asociado. De este modo se pueden encadenar varios `.then()` para "simular" un código secuencial, del estilo de "cuando esta promesa se resuelva haz esto, y después, cuando esta otra se resuelva, haz esto otro, y después...)

Esta sería la nueva sintaxis:

    // Versión con Promises
    // Ahora asinc1 y asinc2 se supone que retornan una Promise
    function main() {
        asinc1(parametros)
        .then(function(r1){ return asinc2(r1); })
        .then(function(r2){
        console.log("Resultado final: " + r2); 
        })
    }

    // Lo anterior puede escribirse aún más concisamente así:
    function main() {
        asinc1(parametros)
        .then(asinc2)
        .then(function(r2){
        console.log("Resultado final: " + r2); 
        })
    }

Desde 2017 JavaScript tiene además las palabras `async/await`, que son _azúcar sintáctico_ para usar Promesas con una nueva sintaxis que las oculta, y las hace parecer código síncrono.

Si usamos la palabra `await` delante de una llamada a una función, se entiende que esa función retorna una promesa. Entonces de algún modo (no voy a entrar en los farragosos detalles de cómo lo hace "por dentro") la ejecución se pausa en ese punto (pero sin bloquear al hilo principal) y sólo se reanuda cuando la promesa haya sido resuelta, y entonces `await` retorna como resultado el valor de la promesa.

Gracias a esto el código quedaría ahora:

    async function main() {
        r1 = await asinc1(parametros);
        r2 = await asinc2(r1);

        console.log("Resultado final: " + r2);
    }

Compara esta última con la primera (síncrona). La estructura es idéntica y sólo se ha puesto `await` delante de las llamadas asíncronas, y `async` delante de la función (ya que sólo una función declarada con `async` puede usar `await`).

La eficiencia en cuanto al tiempo de ejecución de las tres soluciones asíncronas es similar. Lo que cambia mucho es la estructura del código, que se simplifica con las Promises y más aún con `await`, lo que posiblemente revierta en menos errores, y mejor mantenibilidad y depuración.


  [1]: https://es.stackoverflow.com/questions/64265/qu%C3%A9-es-una-promesa-en-javascript