JavaScript Async
Using async and await makes it simpler to write promises.
The use of async in a function causes it to return a Promise.
The await keyword causes a function to pause and wait for a Promise.
Async Syntax
When you use the keyword async before a function, it causes the function to return a promise.
Example
async function myFunction() {
return "Hello";
}
Is the same as:
function myFunction() {
return Promise.resolve("Hello");
}
Here's how you can utilize the Promise:
myFunction().then(
function(value) { /* code if successful */ },
function(error) { /* code if some error */ }
);
Or in simpler terms, when you anticipate receiving a regular value (a standard response, not an error):
Await Syntax
The await keyword is only allowed within a function that has been declared as async.
The await keyword causes the function to stop running temporarily and wait until a promise is fulfilled before it resumes execution:
let value = await promise;
Example
Take it step by step and understand how to utilize it.
JavaScript already has two pre-defined terms: "resolve" and "reject."
We won't make them ourselves, but summon one when the executor function is prepared.
Frequently, we won't require a reject function.
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript async / await</h1>
<p id="demo"></p>
<script>
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
async function myFunction() {
return "Hello";
}
myFunction().then(function(value) {
myDisplayer(value);
}, function(error) {
myDisplayer(error);
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript async / await</h1>
<p id="demo"></p>
<script>
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
async function myFunction() {
return "Hello";
}
myFunction().then(function(value) {
myDisplayer(value);
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript async / await</h1>
<h2 id="demo"></h2>
<script>
async function myDisplay() {
let myPromise = new Promise(function(resolve, reject) {
resolve("I love Coding !!");
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript async / await</h1>
<h2 id="demo"></h2>
<script>
async function myDisplay() {
let myPromise = new Promise(function(resolve) {
resolve("I love Coding !!");
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript async / await</h1>
<h2 id="demo"></h2>
<p>Wait 3 seconds (3000 milliseconds) for this page to change.</p>
<script>
async function myDisplay() {
let myPromise = new Promise(function(resolve) {
setTimeout(function() {
resolve("I love Coding !!");
}, 3000);
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript async / await</h1>
<p id="demo"></p>
<script>
async function getFile() {
let myPromise = new Promise(function(resolve) {
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();
});
document.getElementById("demo").innerHTML = await myPromise;
}
getFile();
</script>
</body>
</html>
HTML
CSS
Javascript
Jquery