async and await make promises easier
You still use promises, but you write the code like normal step by step code.
async makes a function return a Promise
await makes a function wait for a Promise
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();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.
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);} );The await Keyword
The await keyword makes a function pause the execution and wait for a resolved promise before it continues:
let value = await promise;The await keyword can only be used inside an async function:
Example
function step1() {
return Promise.resolve("A");
}
async function run() {
let value = await step1();
myDisplayer(value);
}
run();Handling Errors with try...catch
Promises use catch() for errors.
async and await use try...catch .
Example
function fail() {
return Promise.reject("Failed");
}
async function run() {
try {
let value = await fail();
console.log(value);
} catch (error) {
console.log(error);
}
}
run();Errors from awaited promises are caught like normal errors.
Sequential vs Parallel
Awaiting one by one runs tasks in sequence.
This is correct when one step depends on the previous step.
Example
async function run() {
let a = await step1();
let b = await step2();
console.log(a, b);
}If tasks do not depend on each other, you can run them in parallel.
Use Promise.all() to wait for both.
Example
async function run() {
let p1 = step1();
let p2 = step2();
let values = await Promise.all([p1, p2]);
console.log(values);
}Start the promises first.
Await them together.
Real Example with fetch
fetch() returns a promise.
This makes it a perfect example for async and await .
Example
async function loadData() {
try {
let response = await fetch("data.json");
let data = await response.json();
console.log(data);
} catch (error) {
console.log(error);
}
}
loadData();This is promise-based async code written in a synchronous style.
Common Beginner Mistakes
Using await outside an async function causes an error.
Forgetting try...catch can hide async errors.
When async code fails, check the console and the Network tab.
Browser Support
async/await is an ECMAScript 2017 feature.
ES2017 is supported in all modern browsers since September 2017 :
| Chrome 58 | Edge 15 | Firefox 52 | Safari 11 | Opera 45 |
|---|---|---|---|---|
| Apr 2017 | Apr 2017 | Mar 2017 | Sep 2017 | May 2017 |
the next lesson focuses on fetch() and real-world network requests.
You will learn status codes, JSON parsing, and common fetch mistakes.
The Fetch API