Menu Log in
Dark mode
Dark code
HTML CSS
JavaScript Async
❮ Previous Next ❯
"async and await make promises easier to write"
async makes a function return a Promise
await makes a function wait for a Promise
Async Syntax
The keyword async before a function makes the function return a promise:
Example
async function myFunction() {
return "Hello";
}
Is the same as:
function myFunction() {
return [Link]("Hello");
}
Here is how to use the Promise:
myFunction().then(
function(value) { /* code if successful */ },
function(error) { /* code if some error */ }
);
Example
async function myFunction() {
return "Hello";
}
myFunction().then(
function(value) {myDisplayer(value);},
function(error) {myDisplayer(error);}
);
Try it Yourself »
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);}
);
Try it Yourself »
Await Syntax
The await keyword can only be used inside an async function.
The await keyword makes the function pause the execution and wait for a resolved
promise before it continues:
let value = await promise;
Example
Let's go slowly and learn how to use it.
Basic Syntax
async function myDisplay() {
let myPromise = new Promise(function(resolve, reject) {
resolve("I love You !!");
});
[Link]("demo").innerHTML = await myPromise;
}
myDisplay();
Try it Yourself »
The two arguments (resolve and reject) are pre-defined by JavaScript.
We will not create them, but call one of them when the executor function is ready.
Very often we will not need a reject function.
Example without reject
async function myDisplay() {
let myPromise = new Promise(function(resolve) {
resolve("I love You !!");
});
[Link]("demo").innerHTML = await myPromise;
}
myDisplay();
Try it Yourself »
Waiting for a Timeout
async function myDisplay() {
let myPromise = new Promise(function(resolve) {
setTimeout(function() {resolve("I love You !!");}, 3000);
});
[Link]("demo").innerHTML = await myPromise;
}
myDisplay();
Try it Yourself »
Waiting for a File
async function getFile() {
let myPromise = new Promise(function(resolve) {
let req = new XMLHttpRequest();
[Link]('GET', "[Link]");
[Link] = function() {
if ([Link] == 200) {
resolve([Link]);
} else {
resolve("File not Found");
}
};
[Link]();
});
[Link]("demo").innerHTML = await myPromise;
}
getFile();
Try it Yourself »
Browser Support
ECMAScript 2017 introduced the JavaScript keywords async and await .
The following table defines the first browser version with full support for both:
Chrome 55 Edge 15 Firefox 52 Safari 11 Opera 42
Dec, 2016 Apr, 2017 Mar, 2017 Sep, 2017 Dec, 2016
❮ Previous Next ❯
COLOR PICKER
Get certified
by completing
a JavaScript
course today!
school
w3 s
2
CE
02
TI 2
R
FI .
ED
Get started
Report Error
Spaces
Upgrade
Newsletter
Get Certified
Top Tutorials
HTML Tutorial
CSS Tutorial
JavaScript Tutorial
How To Tutorial
SQL Tutorial
Python Tutorial
[Link] Tutorial
Bootstrap Tutorial
PHP Tutorial
Java Tutorial
C++ Tutorial
jQuery Tutorial
Top References
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
[Link] Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference
Top Examples
HTML Examples
CSS Examples
JavaScript Examples
How To Examples
SQL Examples
Python Examples
[Link] Examples
Bootstrap Examples
PHP Examples
Java Examples
XML Examples
jQuery Examples
Get Certified
HTML Certificate
CSS Certificate
JavaScript Certificate
Front End Certificate
SQL Certificate
Python Certificate
PHP Certificate
jQuery Certificate
Java Certificate
C++ Certificate
C# Certificate
XML Certificate
FORUM | ABOUT
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and
learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant
full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use,
cookie and privacy policy.
Copyright 1999-2023 by Refsnes Data. All Rights Reserved.
W3Schools is Powered by [Link].