Callbacks Promises Async Await

Author: nilajcoder

Callbacks, Promises & Async Await.docx

@@ -0,0 +1,52 @@
+/*
+Sync in JS
+=============
+Synchronous means the code runs in a particular sequence of instructions given in the program.
+Each instruction waits for the previous instruction to complete its excution.
+*/
+
+console.log("One");
+console.log("Two");
+console.log("Three");
+/*
+ASynchronous
+===============
+Due to Synchronous Programming,sometimes imp instructions 
+get blocked due to some previous instrctions,which cause delay
+in the UI . ASynchronous code execution allows to execute next
+instruction immediately and does not block the flow.
+*/
+console.log("One");
+console.log("Two");
+setTimeout(()=>{
+    console.log("hello");
+},4000)// timeout 4s=4000ms
+console.log("Three");
+console.log("Four");
+
+
+/*
+Callbacks-A callback is a funtion passed as an argument to another funtion
+*/
+ function sum(a ,b){
+    console.log(a+b);
+ }
+
+ function calculator(a,b,sumCallback){
+    sumCallback(a,b);
+ }
+ /*
+ here sum is a funtion that passed 
+ as a argument in calculator funtion
+ */
+ calculator(1,2,sum); 
+
+
+
+
+
+
+
+ /*
+
+ */

Callbacks, Promises & Async Await/app.js

@@ -0,0 +1,82 @@
+
+/*
+Callback hell Example
+ Callback hell-Nested Callback stacked below one another formimg
+                 pyramid structure
+*/
+function getData(dataId,getNextData){
+    setTimeout(()=>{
+        console.log("data",dataId);
+        if(getNextData){
+         getNextData();
+        }
+        
+    },2000);
+}
+
+getData(1,()=>{
+    getData(2,()=>{
+     getData(3);
+    });
+})
+
+
+/*
+Promises:-Callback hell is complex to understand thats why Promises are used
+Promise is eventual task.It is an object in js . it is a soloution of
+ callback hell. 
+
+*/
+//pending
+let promise2=new Promise((resolve,reject)=>{
+    console.log("I am a pending promisses");
+});
+//resovle
+let promise=new Promise((resolve,reject)=>{
+    console.log("I am a resolve promisses");
+    resolve("success");
+    
+});
+ 
+//reject
+let promise1=new Promise((resolve,reject)=>{
+    console.log("I am a reject promisses");
+    reject("some error");   
+});
+
+
+/*
+Example of Promises
+*/
+
+function GetData(id,nextdata){
+    return new  Promise((resolve,reject)=>{
+        setTimeout(()=>{
+            console.log("data",id);
+            resolve("success");
+            if(nextdata){
+                nextdata();
+            }
+        },10000);
+    } );
+
+}
+
+const getPromises=()=>{
+   return  new Promise((resolve,reject)=>{
+        console.log("I am a promises");
+       resolve("success");
+       //reject("error")
+    });
+};
+
+let val=getPromises();
+val.then((res)=>{
+    console.log("Promise Fulfilled",res);
+});
+
+val.catch((err)=>{
+    console.log("rejected",err);
+})
+
+

Callbacks, Promises & Async Await/app1.js

@@ -0,0 +1,50 @@
+//promise Chaining
+function asyncFunc1(){
+    return new Promise((resolve,reject)=>{
+      setTimeout(()=>{
+       console.log(" data 1");
+       resolve("Success Data");
+      },4000)
+    });
+}
+
+function asyncFunc2(){
+    return new Promise((resolve,reject)=>{
+      setTimeout(()=>{
+       console.log(" data 2");
+       resolve("Success Data");
+      },4000)
+    });
+}
+console.log("Fetching Data 1...........");
+asyncFunc1().then((res)=>{
+    console.log(res);
+console.log("Fetching Data 2...........");
+asyncFunc2().then((res)=>{
+    console.log(res);
+});
+
+});
+
+
+//promise chaining example
+function GetData(id,nextdata){
+    return new  Promise((resolve,reject)=>{
+        setTimeout(()=>{
+            console.log("data",id);
+            resolve("success");
+         
+        },10000);
+    });
+}
+
+GetData(1).
+then((res)=>{
+ return GetData(2);
+})
+ .then((res)=>{
+    return GetData(3);
+  })
+  .then((res)=>{
+    console.log(res);
+  })

Callbacks, Promises & Async Await/app2.js

@@ -0,0 +1,67 @@
+
+/*
+Async-Await
+--------------
+async funtion always returns promise
+await pauses the execution of its surroundings async funtion until 
+the promise is settled.
+
+*/
+
+
+async function hello(){
+    console.log("Hello");
+}
+
+
+
+function api(){
+    return new Promise((resolve,reject)=>{
+       setTimeout(()=>{
+        console.log("Weather Data");
+        resolve(200);
+       },5000)
+    });
+}
+
+async function getweatherData(){
+    await api();//1st call
+    await api();//2nd call
+}
+
+
+
+//Async-await Example
+function GetData(id){
+    return new  Promise((resolve,reject)=>{
+        setTimeout(()=>{
+            console.log("data",id);
+            resolve("success");
+         
+        },5000);
+    });
+}
+
+//Async-Await
+async function GetAllData(){
+    console.log("Getting data 1....")
+    await GetData(1);
+    console.log("Getting data 2....")
+    await GetData(2);
+    console.log("Getting data 3....")
+    await GetData(3);
+}
+
+/*
+IIFE-Immediately invoked Function Expression
+IIFE is a function that is called immediately invoked as soon as it is defined
+*/
+
+(async function (){
+    console.log("Getting data 1....")
+    await GetData(1);
+    console.log("Getting data 2....")
+    await GetData(2);
+    console.log("Getting data 3....")
+    await GetData(3);
+})();

Callbacks, Promises & Async Await/app3.js

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Synchronous,ASynchronous,Callbacks</title>
+</head>
+<body>
+    <script src="app.js"></script>
+</body>
+</html>

Callbacks, Promises & Async Await/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Callback hell Example,Promises</title>
+</head>
+<body>
+    
+    <script src="app1.js"></script>
+</body>
+</html>

Callbacks, Promises & Async Await/index1.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Promisses Chaining</title>
+</head>
+<body>
+    
+    <script src="app2.js"></script>
+</body>
+</html>

Callbacks, Promises & Async Await/index2.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Async Await</title>
+</head>
+<body>
+   
+    <script src="app3.js"></script>
+</body>
+</html>

Callbacks, Promises & Async Await/index3.html

@@ -0,0 +1,5 @@
+{
+    "recommendations": [
+        "bracketpaircolordlw.bracket-pair-color-dlw"
+    ]
+}