understanding promises and how to use it in a request

chapter_12_Async/index.html

@@ -10,7 +10,10 @@
     <!-- <script src="sandbox1.js"></script> -->
     <!-- <script src="http-request-1.js"></script> -->
     <!-- <script src="http-request-2.js"></script> -->
-    <script src="jason-data.js"></script>
-    <!-- <script src="datefns.js"></script> -->
+    <!-- <script src="jason-data-1.js"></script> -->
+    <!-- <script src="jason-data-2.js"></script> -->
+    <!-- <script src="promise-1.js"></script> -->
+    <script src="promise-2.js"></script>
+    <!-- <script src="promise-3.js"></script> -->
   </body>
 </html>

chapter_12_Async/jason-data.js → chapter_12_Async/jason-data-1.js

@@ -14,8 +14,9 @@ const getTodos = (callback) => {
     }
   })
 
-  // request.open('GET', 'https://jsonplaceholder.typicode.com/todos/')
-  request.open('GET', 'todos.json')
+  request.open('GET', 'https://jsonplaceholder.typicode.com/todos/')
+
+  // request.open('GET', 'todos.json')
 
   request.send();
 }

chapter_12_Async/jason-data-2.js

@@ -0,0 +1,27 @@
+//if we have several files(endpoints) that we need to get one after the other
+const getTodos = (apis, callback) => {
+  const request = new XMLHttpRequest();
+
+  request.addEventListener('readystatechange', ()=>{
+    if(request.readyState === 4 && request.status === 200){
+      const data = JSON.parse(request.responseText)
+      callback(undefined, data);
+    } else if(request.readyState === 4){
+      callback('could not fetch data', undefined);
+    }
+  })
+
+  request.open('GET', apis)
+  request.send();
+}
+
+//this is callback hell situation, it's very messy when there are many requests/callbacks - and this is when PROMISES comes into play
+ getTodos('todos/luigi.json', (err, data)=>{
+  console.log(data)
+  getTodos('todos/mario.json', (err, data)=>{
+    console.log(data)
+    getTodos('todos/shaun.json', (err, data)=>{
+      console.log(data)
+    })
+  })
+ });

chapter_12_Async/promise-1.js

@@ -0,0 +1,45 @@
+//if we have several files(endpoints) that we need to get one after the other
+const getTodos = (apis, callback) => {
+  const request = new XMLHttpRequest();
+
+  request.addEventListener('readystatechange', ()=>{
+    if(request.readyState === 4 && request.status === 200){
+      const data = JSON.parse(request.responseText)
+      callback(undefined, data);
+    } else if(request.readyState === 4){
+      callback('could not fetch data', undefined);
+    }
+  })
+
+  request.open('GET', apis)
+  request.send();
+}
+
+//promise example
+
+const getSomething = () => {
+  // step 1: when we use promises the first thing we do is to return a new promise
+  return new Promise((resolve, reject)=>{
+    //fetch something
+    // resolve('some data');
+    reject('some error');
+  });
+}
+
+//when we resolve something in a promise, it fires the callback(first parametor) inside the then method, and that callback function takes the data we pass through to the resolve function.
+//same thing with the reject method, when promise has a reject outcome, the callback(second parameter) will fire inside the then method, and that callback function takes the data we pass through to the reject function.
+// getSomething().then((data)=>{
+//   console.log(data); //will display 'some data'
+// }, (err)=>{
+//   console.log(err) //will display 'some err'
+// })
+
+
+//Below works the same but looks neater, especially when it comes to chainning promises together.
+//If the promise gets resolved, then it fires the callback in the then() method. If it get rejected, instead it comes to the catch() method and fires the callback inside of it.
+
+getSomething().then(data => {
+  console.log(data)
+}).catch(err => {
+  console.log(err)
+})

chapter_12_Async/promise-2.js

@@ -0,0 +1,24 @@
+//if we have several files(endpoints) that we need to get one after the other
+const getTodos = (apis) => {
+  return new Promise((resolve, reject)=>{
+    const request = new XMLHttpRequest();
+
+    request.addEventListener('readystatechange', ()=>{
+      if(request.readyState === 4 && request.status === 200){
+        const data = JSON.parse(request.responseText)
+        resolve(data)
+      } else if(request.readyState === 4){
+        reject('encountered some error!')
+      }
+    })
+    request.open('GET', apis)
+    request.send();
+  })
+
+}
+
+getTodos('todos/luigi.json').then(data=>{
+  console.log(data)
+}).catch(err => {
+  console.log(err)
+})

chapter_12_Async/todos/luigi.json

@@ -0,0 +1,5 @@
+[
+  {"text": "do the plumming", "author": "Luigi"},
+  {"text": "avoid mario", "author": "Luigi"},
+  {"text": "go kart racing", "author": "Luigi"}
+]

chapter_12_Async/todos/mario.json

@@ -0,0 +1,5 @@
+[
+  {"text": "make fun of luigi", "author": "Mario"},
+  {"text": "rescue peach (again)", "author": "Mario"},
+  {"text": "go kart racing", "author": "Mario"}
+]

chapter_12_Async/todos/shaun.json

@@ -0,0 +1,5 @@
+[
+  {"text": "play mariokart", "author": "Shaun"},
+  {"text": "buy some bread", "author": "Shaun"},
+  {"text": "take a nap", "author": "Shaun"}
+]