multiple API call to execute sequentially with Promise

Author: rohan-paul

Javascript/Promise-master-notes/How-Promise-makes-code-Asynchronous-non-blocking.md

@@ -1,6 +1,6 @@
-# Understanding how Promise makes code Asynchronous / non-blocking by understanding how Fetch API works
+### Understanding how Promise makes code Asynchronous / non-blocking by understanding how Fetch API works
 
-## Key Point - With the .then() method, we can chain our ASYNCHRONOUS calls in a SYNCHRONOUS manner. So, within the Promise block, I am converting few Asynchronous operations to Synchronous ones.
+#### Key Point - With the .then() method, we can chain our ASYNCHRONOUS calls in a SYNCHRONOUS manner. So, within the Promise block, I am converting few Asynchronous operations to Synchronous ones.
 
 ## And during that time when those Synchronous operations are getting executed, whatever is after the chain of methods inside the Promise-related block, gets executed normally without being blocked or having to wait for them, while I wait for some execution ( e.g. waiting for response from an API) to happen within the Promise’s block of codes.
 

Javascript/Promise-master-notes/Promise-General-Notes.md

@@ -0,0 +1,5 @@
+Promise object is used for handling asynchronous computations which has some important guarantees that are difficult to handle with the callback method (the more old-school method of handling asynchronous code).
+
+A Promise object is simply a wrapper around a value that may or may not be known when the object is instantiated and provides a method for handling the value after it is known (also known as resolved) or is unavailable for a failure reason (we'll refer to this as rejected).
+
+Using a Promise object gives us the opportunity to associate functionality for an asynchronous operation's eventual success or failure (for whatever reason). It also allows us to treat these complex scenarios by using synchronous.

Javascript/sequential-execution-of-codes-React-Node-Context/multiple-API-calls-before-executing-next-function-in-React-Promise-2.md

@@ -0,0 +1,18 @@
+Lets say I have this
+
+```js
+this.getList();
+this.getServers();
+this.getCredentials();
+console.log("waited");
+```
+
+### What would be a way to console.log only after the other 3 finished? and those 3 are actually API calls.
+
+Solution -
+
+```js
+Promise.all([this.getList(), this.getServers(), this.getCredentials()]).then(
+  () => console.log("waited")
+);
+```

Javascript/sequential-execution-of-codes-React-Node-Context/multiple-API-fetch-before-executing-next-function-in-React-Promise-1.md

@@ -0,0 +1,44 @@
+#### Problem - It a common requirement in React to sequentially execute codes ONLY after multiple API calls have given their result to the component. Here, I have two different API points that I am trying to get and restructure after getting the data : students and scores. They are both an array of objects.
+
+#### So the goal is : first, get students and scores, and second, with students and scores saved in state, I will modify them and create a new state based on students and scores state. In short, I have 3 functions: getStudents, getScores, and rearrangeStudentsAndScores. getStudents and getScores need to finish before rearrangeStudentsAndScores can run.
+
+[I have not tested this code yet in an actual app]
+
+```js
+// Refactor getStudents and getScores to return  Promise for their response bodies
+function getStudents() {
+  return fetch(`api/students`, {
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "application/json"
+    }
+  }).then(response => response.json());
+}
+
+function getScores() {
+  return fetch(`api/scores`, {
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "application/json"
+    }
+  }).then(response => response.json());
+}
+
+// Request both students and scores in parallel and return a Promise for both values.
+// `Promise.all` returns a new Promise that resolves when all of its arguments resolve.
+function getStudentsAndScores() {
+  return Promise.all([getStudents(), getScores()]);
+}
+
+// When this Promise resolves, both values will be available. And because getStudentsAndScores() returns a Promise, I can chain a .then() function to it.
+getStudentsAndScores().then(([students, scores]) => {
+  // both have loaded!
+  console.log(students, scores);
+});
+```
+
+In this approach I make both requests at the same time.
+
+#### Source
+
+[https://stackoverflow.com/questions/44980247/how-to-finish-all-fetch-before-executing-next-function-in-react](https://stackoverflow.com/questions/44980247/how-to-finish-all-fetch-before-executing-next-function-in-react)

Javascript/sequential-execution-of-codes-React-Node-Context/sequential-execution-1.png

@@ -1,4 +1,4 @@
-### Use case (Sequential Execuetion with plain callback function and async-await) - Here in the below EDIT / PUT route - From Client side req.body, I am sending a JSON data which along with other info has a 'date' field. I had to format that 'date' from req.body (to "YYYY-MM-DD") with moment, before running findByIdAndUpdate(). Else mongoose was saving the date one day prior to what I was selecting in the DatePicker, and then subsequent API call for that date's data (after the EDIT) will NOT give me the correct edited data.
+### Use case (Sequential Execution with plain callback function and async-await) - Here in the below EDIT / PUT route - From Client side req.body, I am sending a JSON data which along with other info has a 'date' field. I had to format that 'date' from req.body (to "YYYY-MM-DD") with moment, before running findByIdAndUpdate(). Else mongoose was saving the date one day prior to what I was selecting in the DatePicker, and then subsequent API call for that date's data (after the EDIT) will NOT give me the correct edited data.
 
 ### NOTE - The code is working EVEN WITHOUT async-await. But including async-await seems to be better for safely achieving the result.
 
@@ -15,7 +15,9 @@
 }
 ```
 
-### The acutal route code in Express backend
+### The actual route code in Express backend
+
+#### Alternative - 1 - With a wrapper function which will invoke a callback()
 
 ```js
 router.put("/:id", (req, res, next) => {
@@ -45,7 +47,7 @@ router.put("/:id", (req, res, next) => {
 });
 ```
 
-#### Alternative - 1 for the above EDIT (PUT) route function (with an extra database call ) - this code was working
+#### Alternative - 2 for the above EDIT (PUT) route function (with an extra database call ) - this code was working
 
 ```js
 router.put("/:id", (req, res, next) => {

Javascript/sequential-execution-of-codes/sequential-execution-async-await.md renamed to Javascript/sequential-execution-of-codes-React-Node-Context/sequential-execution-async-await-in-Express-routes.md

@@ -0,0 +1,11 @@
+JavaScript is single threaded, that means only one statement is executed at a time. As the JS engine processes our script line by line, it uses this single Call-Stack to keep track of codes that are supposed to run in their respective order. Like what a stack does, a data structure which records lines of executable instructions and executes them in LIFO manner. So say if the engine steps into a function foo(){ it PUSH-es foo() into the stack and when the execution of foo()return; } is over foo() is POP-ped out of the call-stack.
+
+<img src="./sequential-execution-1.png">
+
+EXERCISE 1: So from the above diagram shows how a typical line by line execution happens. When the script of three console.log() statements is thrown at JS — 
+Step 1: The console.log("Print 1")is pushed into the call stack and executed, once done with execution, it is then popped out of the stack. Now the stack is empty and ready for any next instruction to be executed.
+Step 2: console.log("Print 2"); // is the next instruction is pushed and the same thing repeats until - Step 3: is executed and there is nothing left to push and execute.
+
+#### Further Reading
+
+https://medium.com/@siddharthac6/javascript-execution-of-synchronous-and-asynchronous-codes-40f3a199e687

Javascript/sequential-execution-of-codes-React-Node-Context/sequential-execution-fundamental_working.md

@@ -0,0 +1,61 @@
+### A specific Use Case -
+
+Here in the below backend Express Route - I have to capture visitor data (after OTP was sent and OTP Mongodb schema updated with that latest OTP) when a visitor to the site downloads data.
+
+But I need to first pick the latest OTP (that was generated and saved in mongodb) from the already saved database before comparing with the otp input by the user when prompted.
+
+```js
+router.route("/visitor/:id").put((req, res, next) => {
+  let visitorData = req.body;
+  let visitorEmail = req.body.company_email;
+  let latestOtp = [];
+
+  // Wrapper function that will wrap the database call (the find() query) in a function and pass it a callback function that gets executed after the database query has finished.
+  // Also always make sure the callback is indeed a function, without this check, if the findLatestOTP() is called either without the callback function as a parameter OR in place of a function a non-function is passed, our code will result in a runtime error.
+  function findLatestOTP(mongoCollection, callback) {
+    mongoCollection
+      .find({ visitor_email: visitorEmail })
+      .limit(1)
+      .sort({ createdAt: -1 })
+      .exec((err, record) => {
+        if (err) {
+          console.log(err);
+        } else {
+          latestOtp.push(record[0].generated_otp);
+          if (typeof callback === "function") {
+            callback();
+          }
+        }
+      });
+  }
+
+  findLatestOTP(OTP, function() {
+    if (req.body.otpReceivedByVisitor !== latestOtp[0]) {
+      return res
+        .status(401)
+        .send({ success: false, msg: "Incorrect Code was input" });
+    } else {
+      DOCUMENTMODAL.findById(req.params.id, (err, record) => {
+        if (err) {
+          console.log(err);
+        }
+        record.visitor.push(visitorData);
+        record.save((err, updatedRecord) => {
+          if (err) {
+            return next(err);
+          }
+          res.status(200).send(updatedRecord);
+        });
+      });
+    }
+  });
+});
+```
+
+#### Some related Explanation -
+
+##### JavaScript is single threaded, that means only one statement is executed at a time. As the JS engine processes our script line by line, it uses this single Call-Stack to keep track of codes that are supposed to run in their respective order.
+
+Like what a stack does, a data structure which records lines of executable instructions and executes them in LIFO manner. So say if the engine steps into a function foo(){ it PUSH-es foo() into the stack and when the execution of foo()return; } is over foo() is POP-ped out of the call-stack.
+
+<img src="./sequential-execution-1.png">