If you’re used to using Promises, is an elegant way to make your more legible. It evaluates as synchronous code but returns a promise that executes on the next . async / await javascript microtask Let’s jump right in and poke around. Open up the and code along with me. Take a simple function and add to the beginning: babel repl async async function sayHello() {return 'hello';} // => Promise {} console.log(sayHello()); You’ll see that calling this function returns a rather than “hello”. This is because anything returned from an function is automatically wrapped in a promise. In order to log “hello” we could do this: Promise async sayHello().then(str => console.log(str)) // => 'hello' OK so what about await? First, write a function that returns a promise: function mapLater(arr, fn, time) {return new Promise((resolve, reject) => {setTimeout(() => {resolve(arr.map(fn));}, time);});} Pretty straight forward, we map over an array after given amount of time. Now let’s use that in an function. async **async function addAndMultiply(arr) {const added = await mapLater(arr, i => i + 2, 2000);const multiplied = await mapLater(added, i => i * 2, 2000); console.log(multiplied);}** addAndMultiply([1, 3, 6, 20]); console.log('hello') 'hello' [6, 10, 16, 44] // => // 4 secs later => You’ll see that “hello” is logged before we are returned our array. Our function is non-blocking. async It’s important to note that must always be inside of an closure. Calling it in the global scope or in a function without the the async keyword will throw an error. await async Handling errors Imagine something goes wrong with our original function: mapLater ...setTimeout(() => { }, time); reject('nope'); Currently, we have no way of surfacing the error in our async function. When we run it, the function will fail silently. To handle errors, one solution is to use : addAndMultiply try / catch async function addAndMultiply(arr) { const added = await mapLater(arr, i => i + 2, 2000);const multiplied = await mapLater(added, i => i * 2, 2000);console.log(multiplied); } try { } catch(err) { console.error(err); // 2 secs later => 'nope' } Since errors bubble up by default, another practical solution would be to handle errors at the async entry point: intricatelyNestedAsyncFunc().catch(err => console.error(err)); Real World Use it today! So many great libraries provide APIs that return promises. For example, if you’re using to retrieve data, you can start doing things like: fetch async function getProfileData(id) {try { ...} catch {...}} const users = await getUser(id); To use now you’ll need to use Babel’s . async / await transform-async-to-generator

Fetch

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Async / Await Warm Up

Too Long; Didn't Read

Company Mentioned

paul christophe

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Async / Await Warm Up

Too Long; Didn't Read

Company Mentioned

paul christophe

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES