JavaScript : Async and Await

The async/await  function declaration defines an asynchronous function, which returns an AsyncFunction object. An asynchronous function is a function which operates asynchronously via the event loop, using an implicit Promise to return its result. Async/await helps writing asynchronous code in a way that looks synchronous. It makes your code cleaner and readable. In addition to that you can use try/catch for proper error handling. Async/await is convenient and clean. Async/await is one of the most revolutionary features that have been added to JavaScript in the past few years.

What is async/await :

• The keyword async before a function means a function which always returns a promise. Even If a function actually returns a non-promise value, prepending the function definition with the “async” keyword directs JavaScript to automatically wrap that value in a resolved promise.
• The keyword await makes JavaScript wait until that promise settles and returns its result.
• Async/await is a new way to write asynchronous code. Previous options for asynchronous code are callbacks and promises.
• Async/await is actually built on top of promises. It cannot be used with plain callbacks or node callbacks.
• Async/await is, like promises, non blocking.
• Async/await makes asynchronous code look and behave a little more like synchronous code. This is where all its power lies.

For Example:

• Lets assume a function `getJSON` that returns a promise, and that promise resolves with some JSON object. We just want to call it and log that response JSON and then return "done".

Using Promise :

const makeGetRequest = () =>
 getJSON().then(response => {
 console.log(response); // this will log JSON data
 return "done";
});
 
makeGetRequest();

Using async/await:

const makeGetRequest = async () => {
 console.log(await getJSON()); // this will log response/JSON data
 return "done";
};
 
makeGetRequest();

Above function has the keyword async before it. The await keyword can only be used inside functions defined with async. `await getJSON()` means that the ‘console.log’ call will wait until getJSON() promise resolves and print its value.`async` function returns a promise implicitly, and the resolve value of the promise will be whatever you return from that function.

ES7 Async/await

Note: You may need to use a transpiler in order to use async/await, you can use either babel or typescript to the polyfills required.

Where to use in React and React-native:

To use async/await in your React code does not require any magic. componentDidMount is the natural place for using `async/await` in React. After all you want to fetch data from APIs as soon as the component mounts, right?

Finally, The purpose of async/await functions is to simplify the behaviour of using promises synchronously and to perform some behaviour on a group of Promises. Just as Promises are similar to structured callbacks, async/await is similar to combining generators and promises.

Source/References:

• async function
• Async functions - making promises friendly | Google Developers