Async / Await y las promesas explicadas

Los operadores async/ awaitfacilitan la implementación de muchas promesas asíncronas. También permiten a los ingenieros escribir código más claro, conciso y comprobable.

Para comprender este tema, debe tener un conocimiento sólido de cómo funcionan las Promesas.

Sintaxis básica

function slowlyResolvedPromiseFunc(string) { return new Promise(resolve => { setTimeout(() => { resolve(string); }, 5000); }); } async function doIt() { const myPromise = await slowlyResolvedPromiseFunc("foo"); console.log(myPromise); // "foo" } doIt();

Hay algunas cosas a tener en cuenta:

  • La función que engloba la awaitdeclaración debe incluir al asyncoperador. Esto le dirá al intérprete de JS que debe esperar hasta que la Promesa se resuelva o rechace.
  • El awaitoperador debe estar en línea, durante la declaración const.
  • Esto funciona rejecttan bien como resolve.

Promesas anidadas vs. Async/Await

Implementar una sola promesa es bastante sencillo. Por el contrario, las promesas encadenadas o la creación de un patrón de dependencia pueden producir un "código espagueti".

Los siguientes ejemplos asumen que la request-promisebiblioteca está disponible como rp.

Promesas encadenadas / anidadas

// First Promise const fooPromise = rp("//domain.com/foo"); fooPromise.then(resultFoo => { // Must wait for "foo" to resolve console.log(resultFoo); const barPromise = rp("//domain.com/bar"); const bazPromise = rp("//domain.com/baz"); return Promise.all([barPromise, bazPromise]); }).then(resultArr => { // Handle "bar" and "baz" resolutions here console.log(resultArr[0]); console.log(resultArr[1]); });

asyncy awaitpromesas

// Wrap everything in an async function async function doItAll() { // Grab data from "foo" endpoint, but wait for resolution console.log(await rp("//domain.com/foo")); // Concurrently kick off the next two async calls, // don't wait for "bar" to kick off "baz" const barPromise = rp("//domain.com/bar"); const bazPromise = rp("//domain.com/baz"); // After both are concurrently kicked off, wait for both const barResponse = await barPromise; const bazResponse = await bazPromise; console.log(barResponse); console.log(bazResponse); } // Finally, invoke the async function doItAll().then(() => console.log('Done!'));

Las ventajas de usar asyncy awaitdeben quedar claras. Este código es más legible, modular y comprobable.

Es justo tener en cuenta que, aunque hay un sentido adicional de concurrencia, el proceso computacional subyacente es el mismo que en el ejemplo anterior.

Manejo de errores / rechazos

Un bloque try-catch básico maneja una Promesa rechazada.

async function errorExample() { try { const rejectedPromise = await Promise.reject("Oh-oh!"); } catch (error) { console.log(error); // "Uh-oh!" } } errorExample();