Merge pull request #16 from writeonk/develop

maulikk04 · web-flow · commit 79e65aa81467 · 2023-03-23T00:08:39.000+05:30
asyn JS
diff --git a/Asynchronous JS/index.html b/Asynchronous JS/index.html
@@ -0,0 +1,13 @@
+<!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>
+    <script src="index1.js"></script>
+</head>
+<body>
+    
+</body>
+</html>
diff --git a/Asynchronous JS/index.js b/Asynchronous JS/index.js
@@ -0,0 +1,53 @@
+
+// console.log(1)
+// console.log(2)
+// setTimeout(() => {
+//     console.log("Function time out")
+// },2000)      //2000 is in millisecond
+
+// console.log(3)
+// console.log(4)
+
+const getTodos = (resource) => {
+    return new Promise ((resolve,reject)=>{              //request,reject are function
+        const request = new XMLHttpRequest()             // new is keyword used to create object, here object name is request
+    
+        request.addEventListener('readystatechange', () => {
+            if(request.readyState === 4 && request.status===200)
+            {
+                const data = JSON.parse(request.responseText)
+             resolve(data)
+            }
+            else if(request.readyState === 4)
+            {
+             reject("could not fetch data")
+            }
+        })
+        
+        request.open('GET',resource);
+        request.send()
+        })
+    }
+ 
+
+// getTodos('todos.json',(err,data) => {
+//      console.log(data)
+//      getTodos('todos1.json',(err,data)=>{
+//         console.log(data)
+//         getTodos('todos2.json',(err,data)=>{
+//             console.log(data)
+//         })
+//      })
+// })
+
+getTodos("todos.json").then((data)=>{
+    console.log(data)
+    return getTodos("todos1.json")
+}).then((data)=>{
+    console.log(data)
+    return getTodos("todos2.json")
+}).then((data)=>{
+    console.log(data)
+}).catch((err)=>{                              //catch is to get get error
+    console.log(err)
+})
diff --git a/Asynchronous JS/index1.js b/Asynchronous JS/index1.js
@@ -0,0 +1,27 @@
+// fetch("todos.json").then((response)=>{       //fetch return promise
+//     console.log('resolved',response)
+//     return response.json()                  //respone.json return promise through which we get the data
+// }).then(data =>{
+//     console.log(data)                   
+// }).catch(err =>{
+//     console.log('error found')
+// })
+
+const getTodos = async ()=>{                    //async makes the function asynchronous and it return promise
+     const response = await fetch('todos.json')
+      // awaits stores the js and it stops the value to assign it to data until the promise has been resolve
+     if(response.status !== 200)        //if there is a problem in url
+     {
+        throw new Error('rejected') //when throw new error is executed then promis will return error and it will caught using .catch
+     }
+     const data = await response.json()
+     return data
+}
+
+getTodos()                   //function call
+   .then(data => {           //without .then we cannot get the value of respone
+    console.log(data)
+   })
+   .catch(err =>{
+    console.log(err.message)     //display err message
+   })
diff --git a/Asynchronous JS/todos.json b/Asynchronous JS/todos.json
@@ -0,0 +1,5 @@
+[
+    {"book":"abc" ,"author" : "xyz" ,"points": 5},
+    {"book":"abc" ,"author" : "xyz" ,"points": 5},
+    {"book":"abc" ,"author" : "xyz" ,"points": 5}
+]
diff --git a/Asynchronous JS/todos1.json b/Asynchronous JS/todos1.json
@@ -0,0 +1,5 @@
+[
+    {"book":"abc" ,"author" : "xyz" ,"points": 5},
+    {"book":"abc" ,"author" : "xyz" ,"points": 5},
+    {"book":"abc" ,"author" : "xyz" ,"points": 5}
+]
diff --git a/Asynchronous JS/todos2.json b/Asynchronous JS/todos2.json
@@ -0,0 +1,5 @@
+[
+    {"book":"abc" ,"author" : "xyz" ,"points": 5},
+    {"book":"abc" ,"author" : "xyz" ,"points": 5},
+    {"book":"abc" ,"author" : "xyz" ,"points": 5}
+]
