node - ¿Cuál es la diferencia entre las promesas de JavaScript y las asíncronas?

react async constructor

Question

Ya he estado usando las funciones ECMAScript 6 y ECMAScript 7 (gracias a Babel) en mis aplicaciones, tanto móviles como web.

El primer paso obviamente fue alcanzar los niveles de ECMAScript 6. Aprendí muchos patrones asíncronos, las promesas (que son realmente prometedoras), los generadores (no estoy seguro de por qué el símbolo *), etc. De estos, las promesas se adaptaron bastante bien a mi propósito. Y los he estado usando bastante en mis aplicaciones.

Aquí hay un ejemplo / pseudocódigo de cómo he implementado una promesa básica:

var myPromise = new Promise(
    function (resolve,reject) {
      var x = MyDataStore(myObj);
      resolve(x);
    });

myPromise.then(
  function (x) {
    init(x);
});

Con el paso del tiempo, me encontré con las características de ECMAScript 7, y una de ellas AWAIT palabras clave / funciones ASYNC y AWAIT . Estos en conjunto hacen grandes maravillas. He comenzado a reemplazar algunas de mis promesas con async & await . Parecen agregar un gran valor al estilo de programación.

Nuevamente, aquí hay un pseudocódigo de cómo se ve mi función de espera asíncrona:

async function myAsyncFunction (myObj) {
    var x = new MyDataStore(myObj);
    return await x.init();
}
var returnVal = await myAsyncFunction(obj);

Dejando a un lado los errores de sintaxis (si los hay), ambos hacen exactamente lo mismo que yo siento. Casi he podido reemplazar la mayoría de mis promesas con asíncrono, espera.

¿Por qué se necesita async, esperar cuando las promesas hacen un trabajo similar?

¿Async, espera resolver un problema mayor? ¿O fue simplemente una solución diferente para devolver la llamada al infierno?

Como dije anteriormente, puedo usar promesas y asíncrono, espero resolver el mismo problema. ¿Hay algo específico que async aguarde resuelto?

Notas adicionales:

He estado usando asíncrono, espera y promete en mis proyectos React y módulos Node.js ampliamente. React especialmente ha sido un madrugador y adoptó muchas características de ECMAScript 6 y ECMAScript 7.

Answer 1

¿Por qué es asincrónico, esperar cuando Promises hace un trabajo similar? ¿Async, espera resolver un problema mayor?

async/await simplemente le da una sensación sincrónica al código asincrónico. Es una forma muy elegante de azúcar sintáctica.

Para consultas simples y manipulación de datos, Promises puede ser simple, pero si se encuentra con escenarios donde hay una manipulación compleja de datos y otras cosas, es más fácil entender lo que sucede si el código simplemente parece síncrono (para decirlo de otra manera, La sintaxis en sí misma es una forma de "complejidad incidental" que async/await puede evitar).

Si está interesado en saberlo, puede usar una biblioteca como co (junto con los generadores) para dar el mismo tipo de sensación. Cosas como esta se han desarrollado para resolver el problema que async/await finalmente resuelve (de forma nativa).

Answer 2

Mi pregunta aquí es: ¿Por qué es asíncrono, esperar cuando Promises hace un trabajo similar? ¿Async, espera resolver un problema mayor? ¿O fue simplemente una solución diferente para devolverle la llamada al infierno? Como dije antes, puedo usar Promesas y Asíncrono, Aguardo para resolver el mismo problema. ¿Hay algo específico que Async Await haya resuelto?

Lo primero que debe comprender es que la sintaxis async / en await es solo azúcar sintáctica que está destinada a aumentar las promesas. De hecho, el valor de retorno de una función async es una promesa. async sintaxis async / await nos brinda la posibilidad de escribir de forma asíncrona sincrónica. Aquí hay un ejemplo:

Promesa de encadenamiento:

function logFetch(url) {
  return fetch(url)
    .then(response => response.text())
    .then(text => {
      console.log(text);
    }).catch(err => {
      console.error(''fetch failed'', err);
    });
}

Función Async :

async function logFetch(url) {
  try {
    const response = await fetch(url);
    console.log(await response.text());
  }
  catch (err) {
    console.log(''fetch failed'', err);
  }
}

En el ejemplo anterior, la await aguarda a que se resuelva o rechace la promesa ( fetch(url) ). Si la promesa se resuelve, el valor se almacena en la variable de response , si la promesa se rechaza arrojaría un error y, por lo tanto, entraría en el bloque catch .

Ya podemos ver que usar async / await podría ser más legible que el encadenamiento de promesa. Esto es especialmente cierto cuando aumenta la cantidad de promesas que estamos utilizando. Tanto Promise chaining como async / await resuelven el problema del infierno de devolución de llamada y el método que elija es cuestión de preferencia personal.

Answer 3

Async / Await proporciona una sintaxis mucho mejor en escenarios más complejos. En particular, cualquier cosa relacionada con bucles o ciertas otras construcciones como try / catch .

Por ejemplo:

while (!value) {
  const intermediate = await operation1();
  value = await operation2(intermediate);
}

Este ejemplo sería considerablemente más complicado con solo usar Promesas.

Answer 4

Async / await puede ayudar a que su código sea más limpio y más legible en los casos en que necesite un flujo de control complicado. También produce un código más amigable para la depuración. Y hace posible manejar errores sincrónicos y asincrónicos con solo try/catch .

Recientemente escribí esta publicación mostrando las ventajas de async / wait sobre promesas en algunos casos de uso común con ejemplos de código https://hackernoon.com/6-reasons-why-javascripts-async-await-blows-promises-away-tutorial-c7ec10518dd9

Answer 5

Comparación completa con pros y contras.

JavaScript simple

• Pros

• No requiere ninguna biblioteca o tecnología adicional
• Ofrece el mejor rendimiento
• Proporciona el mejor nivel de compatibilidad con bibliotecas de terceros.
• Permite la creación de algoritmos ad hoc y más avanzados.

• Contras

• Podría requerir código adicional y algoritmos relativamente complejos

Asíncrono (biblioteca)

• Pros

• Simplifica los patrones de control de flujo más comunes
• Sigue siendo una solución basada en devolución de llamada
• Buen rendimiento

• Contras

• Introduce una dependencia externa.
• Puede que aún no sea suficiente para los flujos avanzados

Promesas

• Pros

• Simplifica enormemente los patrones de flujo de control más comunes
• Robusto manejo de errores
• Parte de la especificación ES2015
• Garantiza la invocación diferida de onFulfilled y onRejected

• Contras

• Requiere promisificar API basadas en devolución de llamada
• Introduce un pequeño éxito de rendimiento

Generadores

• Pros

• Hace que la API sin bloqueo parezca una bloqueadora
• Simplifica el manejo de errores
• Parte de la especificación ES2015

• Contras

• Requiere una biblioteca de control de flujo complementaria
• Todavía requiere devoluciones de llamada o promesas para implementar fl ujos no secuenciales
• Requiere thunkify o promisificar API no basadas en generador

Async espera

• Pros

• Hace que la API sin bloqueo parezca un bloqueo
• Sintaxis limpia e intuitiva

• Contras

• Requiere que Babel u otros transpiladores y alguna configuración se usen hoy

Answer 6

ambas son las formas de manejar el código asíncrono. Pero hay una diferencia entre la ejecución de cada uno. Aquí está la ejecución de trabajo:

Promesa

El objeto Promise representa la posible finalización (o falla) de una operación asincrónica y su valor resultante. Es un proxy para un valor no necesariamente conocido en su momento de creación, y representa el resultado futuro de una operación asincrónica.

El código de llamada puede esperar hasta que se cumpla esa promesa antes de ejecutar el siguiente paso. Para hacerlo, la promesa tiene un método llamado then , que acepta una función que se invocará cuando se cumpla la promesa.

Asíncrono / aguardar

Cuando se llama a una función async , devuelve una Promise . Cuando la función async devuelve un valor, la Promise se resolverá con el valor devuelto. Cuando la función async arroja una excepción o algún valor, la Promesa será rechazada con el valor arrojado.

Una función asincrónica puede contener una expresión de espera, que detiene la ejecución de la función asincrónica y espera la resolución de la Promesa aprobada, y luego reanuda la ejecución de la función asincrónica y devuelve el valor resuelto

Ventajas de async / aguardar sobre promesa

• Async / await se construye para dar una sintaxis limpia a la semántica de continuación de las operaciones asincrónicas.
• Evita la devolución de llamada / promesa infierno.