JavaScript Async

 Tutorials  Exercises  Services   Spaces Get Certified My W3Schools
HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT
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 Promise.resolve("Hello");
}
Here is how to use the Promise:
myFunction().then(
function(value) { /* code if successful */ },
function(error) { /* code if some error */ }
);
Example

return "Hello";
}
myFunction().then(
function(value) {myDisplayer(value);},
function(error) {myDisplayer(error);}
);
Try it Yourself »
Tutorials  Exercises  Services   Spaces Get Certified My W3Schools
HTML
Or simpler, since you expect a normal value (a normal response, not an error):
Example

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 !!");
});
document.getElementById("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.

 Tutorials  Exercises 
Example without reject
Services   Spaces Get Certified My W3Schools
HTML
let myPromise = new Promise(function(resolve) {
resolve("I love You !!");
});
}
myDisplay();
Try it Yourself »
Waiting for a Timeout

setTimeout(function() {resolve("I love You !!");}, 3000);
});
}
myDisplay();
Try it Yourself »
Waiting for a File
async function getFile() {

let req = new XMLHttpRequest();
req.open('GET', "mycar.html");
req.onload = function() {
if (req.status == 200) {
resolve(req.response);
} else {
resolve("File not Found");
}
};
req.send();
});
}
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:
 Tutorials  Exercises  Services   Spaces Get Certified My W3Schools
HTML
Chrome 55 Edge 15 Firefox 52 Safari 11 Opera 42
Dec, 2016 Apr, 2017 Mar, 2017 Sep, 2017 Dec, 2016
❮ Previous Next ❯
 SPACES UPGRADE AD-FREE NEWSLETTER GET CERTIFIED
CONTACT US
Top Tutorials Top References Top Examples

HTML Tutorial HTML Reference HTML Examples
CSS Tutorial CSS Reference CSS Examples
JavaScript Tutorial JavaScript Reference JavaScript Examples
How To Tutorial SQL Reference How To Examples
SQL Tutorial Python Reference SQL Examples
Python Tutorial W3.CSS Reference Python Examples
W3.CSS Tutorial Bootstrap Reference W3.CSS Examples
Bootstrap Tutorial PHP Reference Bootstrap Examples
PHP Tutorial HTML Colors PHP Examples
Java Tutorial Java Reference Java Examples
C++ Tutorial Angular Reference XML Examples
jQuery Tutorial jQuery Reference 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
Tutorials  Exercises  Services   Spaces Get Certified My W3Schools
HTML
    
FORUM ABOUT CLASSROOM

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-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.

JavaScript Async

Uploaded by

JavaScript Async

Uploaded by

 Tutorials  Exercises  Services   Spaces Get Certified My W3Schools

"async and await make promises easier to write"

async makes a function return a Promise

await makes a function wait for a Promise

async function myFunction() {

Is the same as:

Here is how to use the Promise:

async function myFunction() {

async function myFunction() {

let value = await promise;

async function myDisplay() {

The two arguments (resolve and reject) are pre-defined by JavaScript.

Very often we will not need a reject function.

Waiting for a Timeout

async function myDisplay() {

Waiting for a File

async function getFile() {

 SPACES UPGRADE AD-FREE NEWSLETTER GET CERTIFIED

Top Tutorials Top References Top Examples

FORUM ABOUT CLASSROOM

You might also like