async-and-await

AzharAli-github · AzharAli-github · commit eb41a5d15769 · 2023-01-11T08:58:01.000+05:00
diff --git a/JavaScript/Advance/Async/4.async-and-await/images/js-logo.png b/JavaScript/Advance/Async/4.async-and-await/images/js-logo.png
diff --git a/JavaScript/Advance/Async/4.async-and-await/index.html b/JavaScript/Advance/Async/4.async-and-await/index.html
@@ -0,0 +1,24 @@
+<!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>async-await</title>
+    <link rel="shortcut icon" href="images/js-logo.png" type="image/x-icon">
+</head>
+
+<body>
+    <h1>Async and Await in JS</h1>
+    <h2 style="font-family: cursive;">Example One:</h2>
+    <p id="textOne" style="font-family: monospace;"></p>
+    <h2 style="font-family: cursive;">Example Two</h2>
+    <p id="textTwo" style="font-family: monospace;"></p>
+    <h2 style="font-family: cursive;">Example Three</h2>
+    <p>wait for 2 seconds after refresh...</p>
+    <p id="textThree" style="font-family: monospace;"></p>
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/JavaScript/Advance/Async/4.async-and-await/script.js b/JavaScript/Advance/Async/4.async-and-await/script.js
@@ -0,0 +1,55 @@
+/*
+   Asynchronous and Await Function were developed in ECMAScript 2017
+   It is related to Promise which we discussed in previous topic 
+   'async' function is used to return Promise
+   'await' makes function which waits for a Promise
+
+   First of all we will discuss about async:
+   UnderStand the following Program 
+   Example
+
+ */
+
+let textOne = document.getElementById('textOne');
+
+function Display(disp) {
+    textOne.innerHTML = disp;
+}
+async function Add(a1, a2) {
+    let x = a1 + a2;
+    return x;
+}
+Add(22, 25).then(
+    function(value) { Display(value) }
+)
+
+/*
+    Example 2 for Learning Concept of Await
+ */
+
+let textTwo = document.getElementById('textTwo');
+
+async function DisplayTwo() {
+    let promiseTwo = new Promise(function(resolve, reject) {
+        resolve("Resolved")
+    });
+    textTwo.innerHTML = await promiseTwo;
+}
+DisplayTwo();
+
+//   Example 3 for Learning the concept of using setTimeOut in Async-Await
+
+let textThree = document.getElementById('textThree');
+
+async function DisplayThree() {
+    let promiseThree = new Promise(function(resolve) {
+        setTimeout(function() { resolve("Resolved Display Three"); }, 2000);
+    })
+    textThree.innerHTML = await promiseThree;
+}
+DisplayThree();
+
+
+
+// Example 4 for Learning the concept of Waiting for a File which was my Dream to learn
+// I will complete that task after learning AJAX XMLHttpRequest
