Why async keyword

They keyword async is used to make a function asynchronous. The await keyword will ask the execution to wait until the defined task gets executed. It allows the use of await Keyword inside the functions with async keyword.

Using await in any other way will cause a syntax error. We as a developer all know that functions are not the only way of writing an extensible code so we can also define it as an object as methods or in class declarations as below. You should always remember that async functions always return promises.

Here is a sample code that I would ask you to give a try and see what output you get. If you see in the code above basically we ask JS engine running the code to wait for the execution of request. The request. Now I shall share with you the more advanced use cases.

Ideally, the system should wait for the execution of the forEach to be completed. But forEach will not wait until all items are finished. It will just execute the tasks and go to the next statement. If await gets a non-promise object with.

The meaning is the same: it ensures that the returned value is a promise and enables await. If a promise resolves normally, then await promise returns the result.

But in the case of a rejection, it throws the error, just as if there were a throw statement at that line. In real situations, the promise may take some time before it rejects. In that case there will be a delay before await throws an error. We can catch that error using try.. In the case of an error, the control jumps to the catch block. We can also wrap multiple lines:.

We can append. If we forget to add. We can catch such errors using a global unhandledrejection event handler as described in the chapter Error handling with promises. And we can use a regular try.. When we need to wait for multiple promises, we can wrap them in Promise. In the case of an error, it propagates as usual, from the failed promise to Promise. The await keyword before a promise makes JavaScript wait until that promise settles, and then:.

However, when converting the above to an async function, it's tempting to go too sequential :. Looks much neater, but my second fetch doesn't begin until my first fetch has been fully read, and so on. This is much slower than the promises example that performs the fetches in parallel. Thankfully there's an ideal middle-ground:. In this example, the URLs are fetched and read in parallel, but the "smart" reduce bit is replaced with a standard, boring, readable for-loop.

If you're targeting browsers that support generators which includes the latest version of every major browser you can sort-of polyfill async functions. Babel will do this for you, here's an example via the Babel REPL - note how similar the transpiled code is. This transformation is part of Babel's es preset. I recommend the transpiling approach, because you can just turn it off once your target browsers support async functions, but if you really don't want to use a transpiler, you can take Babel's polyfill and use it yourself.

Instead of:. Other than that it works the same. If you're targeting older browsers, Babel can also transpile generators, allowing you to use async functions all the way down to IE8. To do this you need Babel's es preset and the es preset. Once async functions land across all browsers, use them on every promise-returning function!

Not only do they make your code tidier, but it makes sure that function will always return a promise. I got really excited about async functions back in , and it's great to see them land, for real, in browsers. Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4. For details, see the Google Developers Site Policies.

Fundamentals Tools Chrome DevTools. Web Fundamentals. Guides Code Labs Samples. Overview Architectural Patterns. Designing Great User Experiences. Semantics Built-in. Semantics and ARIA. Responsive Web Design. Install Prompts. Device APIs. Sign in and Credential Management. User Input. Web Push Notifications. Video and Audio Playback.