async / await Since: ES2017(ECMAScript 2017)
A syntax for writing asynchronous code in an intuitive, synchronous style. Use async to declare an asynchronous function and await to wait for a Promise to resolve.
Syntax
// Declares an async function. The return value is automatically wrapped in a Promise.
async function functionName() {
// Waits for the Promise to resolve.
var result = await Promise;
}
// Using a function expression
var functionName = async function() {
var result = await Promise;
};
Keywords
| Keyword | Description |
|---|---|
| async | Placed before a function to make it an asynchronous function. An async function always returns a Promise. |
| await | Waits for a Promise to resolve and extracts the resulting value. Can only be used inside an async function. |
Sample Code
// A helper async function for testing
function wait(ms) {
return new Promise(function(resolve) {
setTimeout(function() {
resolve("Waited " + ms + "ms");
}, ms);
});
}
// Basic usage of async/await
async function main() {
console.log("Start");
var result = await wait(2000); // Waits for 2 seconds.
console.log(result); // Logs "Waited 2000ms".
console.log("Done");
}
main();
// Comparison with the then() chain approach
// then() version: nesting tends to grow deeper.
wait(1000).then(function(msg1) {
console.log(msg1);
return wait(1000);
}).then(function(msg2) {
console.log(msg2);
});
// async/await version: code reads top to bottom in a straight line.
async function sequential() {
var msg1 = await wait(1000);
console.log(msg1); // Logs "Waited 1000ms".
var msg2 = await wait(1000);
console.log(msg2); // Logs "Waited 1000ms" one more second later.
}
sequential();
// Handling errors with try...catch.
async function fetchUserData() {
try {
var response = await fetch("https://api.example.com/user");
var data = await response.json();
console.log(data.name);
} catch (error) {
console.log("Failed to fetch data: " + error.message);
} finally {
console.log("Network request finished");
}
}
fetchUserData();
// Running multiple async operations in parallel
async function loadAll() {
// Combine Promise.all() with await to wait for all operations to finish.
var results = await Promise.all([
fetch("https://api.example.com/users"),
fetch("https://api.example.com/posts")
]);
console.log("All data loaded");
}
loadAll();
Notes on await
await can only be used inside an async function. Using it in a regular function or at the global scope causes an error.
// Incorrect — causes an error
function normal() {
var result = await wait(1000); // SyntaxError: await cannot be used outside an async function.
}
// Correct — used inside an async function
async function correct() {
var result = await wait(1000); // Works as expected.
console.log(result);
}
correct();
Also, writing multiple await calls sequentially runs them one after another. For independent operations, use Promise.all() to run them in parallel for better performance.
// Sequential execution: takes 3 seconds total.
async function slow() {
var a = await wait(1000); // Waits 1 second.
var b = await wait(2000); // Waits another 2 seconds.
console.log(a, b);
}
// Parallel execution: completes in 2 seconds (the slowest task).
async function fast() {
var results = await Promise.all([wait(1000), wait(2000)]);
console.log(results[0], results[1]);
}
Overview
async / await is a syntax introduced in ES2017 for working with Promises more concisely. With Promise chains using then(), the more complex the logic, the harder the code becomes to read. With async / await, you can write asynchronous code that looks just like ordinary synchronous code.
An async function always returns a Promise. When you return a value from inside the function, it is automatically wrapped in Promise.resolve(). If an error is thrown, it is wrapped in Promise.reject(), and the caller can handle it with catch() or try...catch.
In modern JavaScript development, most asynchronous code is written with async / await. It is an intuitive syntax for tasks that require waiting — such as server communication, database queries, and file I/O — making it easy even for beginners to understand.
Browser Compatibility
51 or earlier ×
Android Browser
60+ ○
54 or earlier ×
Chrome Android
60+ ○
54 or earlier ×
Firefox Android
79+ ○
51 or earlier ×If you find any errors or copyright issues, please contact us.