JavaScript Async Functions
JavaScript async and await
"async and await make promises easier"
The async and await keywords make Promise-based code easier to read.
They let asynchronous code look much like ordinary synchronous code.
Behind the scenes, async and await still use Promises.
The async Keyword
The async keyword before a function makes the function return a promise.
This is true even if you return a normal value.
If the function returns a value, JavaScript automatically wraps that value in a Promise.
Example
// Create an async function
async function hello() {
return "Hello World!";
}
// Call the async function
hello().then(function(value) {
myDisplayer(value);
});
Try it Yourself »
The await Keyword
The await keyword waits for a Promise to settle.
It can only be used inside an async function or at the top level of a JavaScript module.
While the async function is waiting, the rest of the program can continue running.
Example
// Create an async function
async function getData() {
let response = await fetch("fetch.txt");
let text = await response.text();
myDisplayer(text);
}
// Call the async function
getData();
Try it Yourself »
What Happens During await?
The await keyword pauses only the current async function.
It does not pause JavaScript.
Other code, timers, events, and user interactions can continue while the Promise is pending.
Example
myDisplayer("Start");
// Create an async function
async function getData() {
await fetch("fetch.txt");
myDisplayer("Done");
}
// Call the async function
getData();
myDisplayer("Continue");
Output:
Start
Continue
Done
Try it Yourself »
Note
JavaScript do not wait.
The async function waits.
Compare Promise and await
Promise Version
// Fetch function
fetch("fetch.txt")
.then(function(response) {
return response.text();
})
.then(function(text) {
myDisplayer(text);
});
Try it Yourself »
async/await
// Asyn function
async function getData() {
let response = await fetch("fetch.txt");
let text = await response.text();
myDisplayer(text);
}
// Call async function
getData();
Try it Yourself »
Note
Both examples do exactly the same work.
The second example is easier to read because the statements appear in the order they execute.
Handling Errors
Use try...catch to handle rejected Promises.
Example
async function getData() {
try {
let response = await fetch("fetch.txt");
let text = await response.text();
myDisplayer(text);
} catch(err) {
myDisplayer(err);
}
}
Try it Yourself »
Note
Errors from awaited promises are caught like normal errors.
Multiple await
Many beginners don't realize that awaits run one after another.
Example
let a = await fetch("a.txt");
let b = await fetch("b.txt");
let c = await fetch("c.txt");
Try it Yourself »
Each await waits for the previous operation to finish.
If the operations do not depend on each other, running them one after another may be slower than necessary.
The next chapter explains how to run asynchronous operations in parallel.
Summary
asyncfunctions always return Promises.awaitwaits for a Promise to settle.awaitpauses the currentasyncfunction, not all of JavaScript.try...catchhandles Promise errors.asyncandawaitmake Promise-based code easier to read.
More Examples
Example
async function myFunction() {
return "Hello";
}
Is the same as:
function myFunction() {
return Promise.resolve("Hello");
}
The result is handled with then() because it is a promise:
myFunction().then(
function(value) { /* code if successful */ },
function(value) { /* code if some error */ }
);
Example
async function myFunction() {
return "Hello";
}
myFunction().then(
function(value) {myDisplayer(value);},
function(value) {myDisplayer(value);}
);
Or simpler, since you expect a normal value (a normal response, not an error):
Example
async function myFunction() {
return "Hello";
}
myFunction().then(
function(value) {myDisplayer(value);}
);
Why async and await Exist
Promise chains can become long.
async and await were created to reduce nesting and improve readability.
Promises Example
// Three functions to run in steps
function step1() {
return Promise.resolve("A");
}
function step2(value) {
return Promise.resolve(value + "B");
}
function step3(value) {
return Promise.resolve(value + "C");
}
// Run the three functions in steps
step1()
.then(function(value) {
return step2(value);
})
.then(function(value) {
return step3(value);
})
.then(function(value) {
myDisplayer(value);
});
The same flow with async and await is easier to read.
Example
// Function to run the three functions in steps
async function run() {
let v1 = await step1();
let v2 = await step2(v1);
let v3 = await step3(v2);
myDisplayer(v3);
}
run();
Common Beginner Mistakes
Using await outside an async function causes an error.
Forgetting try...catch can hide async errors.
