Promises
Promise
is an object which ensures to produce a single value in the future (when
required).
Ø
A Promise can never fail or succeed twice or more. This
can happen only once.
Ø
Promises are resolve or reject
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<h2 style="background-color:
rgb(9, 238, 9);color:rgb(255, 0, 0);font-weight: bolder;font-family: Georgia,
'Times New Roman', Times, serif;">Promise</h2>
<h5 style="color:
rgb(231, 15, 166);">Output</h5>
</head>
<body>
<script>
var p=new
Promise(function(resolve, reject){
var x= 2+3;
if(x==5)
resolve("
executed and resolved successfully");
else
reject("rejected");
});
p.then(function(fromResolve){
document.write("Promise is"+fromResolve);
}).catch(function(fromReject){
document.write("Promise is "+fromReject);
});
</script>
</body>
</html>
Output
JavaScript
Async/Await
JavaScript is always synchronous and single-threaded that
provides the event loops.
Async/Await
An async
function is a function that is declared with the async keyword and allows the
await keyword inside it. The async and await keywords allow asynchronous, promise-based behavior to be written more easily and
avoid configured promise chains.
Async function myfirstfunction() {
return "Hello World"
}
It is the same as:
async function myfirstfunction() {
return Promise.resolve("Hello World");
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<h2 style="background-color:
rgb(9, 238, 9);color:rgb(255, 0, 0);font-weight: bolder;font-family: Georgia, 'Times
New Roman', Times, serif;">Async</h2>
<h5 style="color:
rgb(231, 15, 166);">Output</h5>
</head>
<body>
<p id="main"></p>
<script>
function a(some) {
document.getElementById("main").innerHTML = some;
}
async function b()
{
return "Welcome
to the World!!!";
}
b().then(
function(value) {a(value);},
function(error) {a(error);}
);
</script>
</body>
</html>
Output
JavaScript Await
It could
only be used inside the async block.
Syntax
let value = await promise;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<h2 style="background-color:
rgb(9, 238, 9);color:rgb(255, 0, 0);font-weight: bolder;font-family: Georgia,
'Times New Roman', Times, serif;">Async</h2>
<h5 style="color:
rgb(231, 15, 166);">Output</h5>
</head>
<body>
<p id="main"></p>
<script>
async function a()
{
let b = new Promise(function(myResolve, myReject) {
myResolve("Welcome to the World!!");
});
document.getElementById("main").innerHTML = await b;
}
a();
</script>
</body>
</html>
Output
Await using Timeout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<h2 style="background-color:
rgb(9, 238, 9);color:rgb(255, 0, 0);font-weight: bolder;font-family: Georgia,
'Times New Roman', Times, serif;">Await</h2>
<h5 style="color:
rgb(231, 15, 166);">Output</h5>
</head>
<body>
<p id="main"></p>
<script>
async function a()
{
let b = new Promise(function(myResolve, myReject) {
setTimeout(function() { myResolve("Welcome to the World!!"); }, 2000);
});
document.getElementById("main").innerHTML = await b;
}
a();
</script>
</body>
</html>
Output
Exception Handling(Error Handling)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<h2 style="background-color:
rgb(9, 238, 9);color:rgb(255, 0, 0);font-weight: bolder;font-family: Georgia,
'Times New Roman', Times, serif;">Await</h2>
<h5 style="color:
rgb(231, 15, 166);">Output</h5>
</head>
<body>
<p id="main"></p>
<script>
async function f()
{
try {
let response = await fetch('http://no-url');
} catch(err) {
alert(err); // TypeError: failed to fetch
}
}
f();
</script>
</body>
</html>
Output
0 comments:
Post a Comment