How to use async/await in JavaScript
Erick McCollum | 20 Apr 2021
DISCLAIMER: The opinions expressed on this website are solely my own, and they are not associated with my employer, another person, or another organization in any way. All information on this website is provided "as is", without guarantee or warranty of any kind. Read the full disclaimer here.
The use of asynchronous programming is essential in web development. Not only is it essential, but asynchronous programming is extremely powerful. In this article I will be giving a brief overview of how to use the async
and await
keywords in JavaScript. Also, please find some additional helpful links/resources at the end of this article.
Background of asynchronous programming
The earliest version of asynchronous programming in JavaScript (at least the earliest that I am aware of) involved the use of “callback” functions. Essentially, “callback” functions provide the developer with a way to pass a function as a parameter to another function. This “callback” function would then be executed once the initial function is complete. The use of “callback” functions is still fairly common, especially in Node.js development.
Building upon the concept of asynchronous programming, Promise
objects were introduced to the JavaScript language. To simplify, JavaScript Promise
objects enable the developer to more easily write effective, maintainable, asynchronous code. Promise
objects are a very complex topic, and I will not try to explain them in great detail in this article. Hopefully if you are reading this article, then it means you already have some familiarity with Promise
objects. If not, then I would suggest that you check out some of the following resources:
- MDN Web Docs: Using Promises
- ErickMcCollum.com: How to Chain JavaScript Promises
- ErickMcCollum.com: How to convert a callback-based function to a promise-based function in JavaScript
JavaScript Promise
objects were a great advancement in asynchronous programming. However, Promise
objects still pose some complexities that can make them difficult to develop with. This is where the async
and await
keywords come into play. The async
and await
keywords empower a JavaScript developer to build upon the functionality of Promise
objects in a way that is much easier to work with, as well as being much more maintainable.
How to use the async
keyword
The async
keyword can be placed in front of a JavaScript function definition. This keyword declares that a function is asynchronous, and it will return a Promise
object. Using the async
keyword enables the developer to write asynchronous code without needing to explicitly create and return Promise
objects.
For example, please see below how a Promise
-based function can be re-written to use the async
keyword.
Function definition using Promise
object:
function getDataAsync() { return new Promise((resolve, reject) => { try { let data = getSomeData(); return resolve(data); } catch (e) { return reject(e); } }); }
Function definition using async
keyword:
async function getDataAsync() { try { let data = getSomeData(); return data; } catch (e) { throw e; } }
How to use the await
keyword
The await
keyword can be used when calling any asynchronous function that returns a Promise
object. This keyword tells the JavaScript runtime not to execute any code past that line until the asynchronous function has completed. Using the await
keyword provides the developer with a way to write asynchronous code without the need for .then()
or .catch()
statements.
One caveat to keep in mind is that the await
keyword can only be used within an asynchronous function that was defined using the async
keyword.
For example, please see below how a function call using Promise
objects can be re-written to use the await
keyword.
Function call using Promise
object:
function getDataAndDoSomethingAsync() { getDataAsync() .then((data) => { doSomethingHere(data); }) .catch((error) => { throw error; }); }
Function call using await
keyword:
async function getDataAndDoSomethingAsync() { try { let data = await getDataAsync(); doSomethingHere(data); } catch (error) { throw error; } }
Additional resources
The following resources may also be helpful.
- MDN Web Docs: Making asynchronous programming easier with async and await
- MDN Web Docs: await
- MDN Web Docs: async function
- freeCodeCamp.org: How to Use Async/Await in JavaScript with Example JS Code
- w3schools.com: JavaScript Async