--- title: Await Promises --- ## Await Promises The `async` / `await` operators make it easier to implement many async Promises. They also allow engineers to write clearer, more succinct, testable code. To understand this subject, you should have a solid understanding of how Promises work. --- ## Basic Syntax ``` javascript function slowlyResolvedPromiseFunc(string) { return new Promise(resolve => { setTimeout(() => { resolve(string); }, 5000); }); } async function doIt() { const myPromise = await slowlyResolvedPromiseFunc("foo"); console.log(myPromise); // "foo" } doIt(); ``` There are a few things to note: * The function that encompasses the `await` declaration must include the `async` operator. This will tell the JS interpreter that it must wait until the Promise is resolved or rejected. * The `await` operator must be inline, during the const declaration. * This works for `reject` as well as `resolve`. --- ## Nested Promises vs. `Async` / `Await` Implementing a single Promise is pretty straightforward. In contrast, Chained Promises or the creation of a dependency pattern may produce "spaghetti code". The following examples assume that the `request-promise` library is available as `rp`. ### Chained/Nested Promises ``` javascript // First Promise const fooPromise = rp("http://domain.com/foo"); fooPromise.then(resultFoo => { // Must wait for "foo" to resolve console.log(resultFoo); const barPromise = rp("http://domain.com/bar"); const bazPromise = rp("http://domain.com/baz"); return Promise.all([barPromise, bazPromise]); }).then(resultArr => { // Handle "bar" and "baz" resolutions here console.log(resultArr[0]); console.log(resultArr[1]); }); ``` ### `async` and `await` Promises ``` javascript // Wrap everything in an async function async function doItAll() { // Grab data from "foo" endpoint, but wait for resolution console.log(await rp("http://domain.com/foo")); // Concurrently kick off the next two async calls, // don't wait for "bar" to kick off "baz" const barPromise = rp("http://domain.com/bar"); const bazPromise = rp("http://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!')); ``` The advantages of using `async` and `await` should be clear. This code is more readable, modular, and testable. It's fair to note that even though there is an added sense of concurrency, the underlying computational process is the same as the previous example. --- ## Handling Errors / Rejection A basic try-catch block handles a rejected Promise. ``` javascript async function errorExample() { try { const rejectedPromise = await Promise.reject("Oh-oh!"); } catch (error) { console.log(error); // "Uh-oh!" } } errorExample(); ``` --- #### More Information: * `await` Operator MDN Docs * `async` Function Operator MDN Docs