convert-callback-to-promise-async-await

Author: rohan-paul

Javascript/Promise-master-notes/How-Promise-makes-code-Asynchronous-non-blocking.md renamed to Promise-Async-Await-Sequential-Execution/Promise-async-await-master-notes/How-Promise-makes-code-Asynchronous-non-blocking.md

@@ -12,6 +12,9 @@ async function asyncF() {
     return 'TEST';
 }
 ```
+
+**Any async function returns a promise implicitly, and the resolve value of the promise will be whatever you return from the function**
+
 ## Async - declares an asynchronous function (async function someName(){...}).
 
 - Automatically transforms a regular function into a Promise.
@@ -22,12 +25,12 @@ async function asyncF() {
 
 - When placed in front of a Promise call, await forces the rest of the code to wait until that Promise finishes and returns a result.
 - This will pause the async function and wait for the Promise to resolve prior to moving on.
-- Await works only with Promises, it does not work with callbacks.
+- **Await works only with Promises, it does not work with callbacks.**
 - Await can only be used inside async functions.
 
 ## Thumb Rules
 
-- await blocks the code execution within the async function, of which it(await statement) is a part.
+- await blocks the code execution within the async function, of which it (i.e. the 'await' statement) is a part.
 
 - There can be multiple await statements within a single async function.
 
@@ -61,8 +64,6 @@ async function f(){
 
 In most previous examples, we assumed that the promises resolve successfully. Hence, await-ing on a promise returned a value. If a promise we await for fails, this will result in an exception within the async function. We can use standard try/catch to handle it, we just need to wrap our await calls like this:
 
-
-
 ```
 async function doSomethingAsync(){
     try {
@@ -76,6 +77,7 @@ async function doSomethingAsync(){
 ```
 
 **Async function without a try/catch block.**
+
 ```
 async function doSomethingAsync(){
     // This async call may fail.
@@ -89,4 +91,4 @@ doSomethingAsync().
     .catch(errorHandler);
 ```
 
-It's important to choose which method of error handling you prefer and stick to it. Using both try/catch and .catch() at the same time will most probably lead to problems.
+It's important to choose which method of error handling you prefer and stick to it. Using both try/catch and .catch() at the same time will most probably lead to problems.

Javascript/Promise-master-notes/Promise-General-Notes.md renamed to Promise-Async-Await-Sequential-Execution/Promise-async-await-master-notes/Promise-General-Notes.md

@@ -1,30 +1,28 @@
-require('es6-promise').polyfill();
-require('isomorphic-fetch');
+require("es6-promise").polyfill();
+require("isomorphic-fetch");
 
-/* I had to use the above packages as withiout it the simple fetch.('url') wont work
+/* I had to use the above packages as without it the simple fetch.('url') wont work
 https://stackoverflow.com/questions/36484156/es6-fetch-is-undefined
 https://www.npmjs.com/package/isomorphic-fetch   */
 
 // APPROACH-1 PROMISE WAY >> First deal with an network request with Promise approach
 
 getJSON = () => {
-
-  return new Promise((resolve) => {
-    fetch('https://tutorialzine.com/misc/files/example.json')
-
-    // The data from the request is available in a .then block
-    // We return the result using resolve.
+  return new Promise(resolve => {
+    fetch("https://tutorialzine.com/misc/files/example.json")
+      // The data from the request is available in a .then block
+      // We return the result using resolve.
       .then(json => {
         resolve(json);
-        console.log('Successively fetched');
-      })
-  })
-}
+        console.log("Successively fetched");
+      });
+  });
+};
 
-getJSON()  // Will fetch and then print "Successively fetched"
+getJSON(); // Will fetch and then print "Successively fetched"
 
 /* EXPLANATION OF THE ABOVE -  The Fetch API provides an interface for making network requests, returning Promises for us to resolve. To use it to get the data, I chain together a single .then callback. The callback receives the Response object and return back its JSON data. And then console.logs it.
-*/
+ */
 
 /* REMEMBER THE FETCH SYNTAX
 
@@ -38,21 +36,18 @@ fetch(url) // Call the fetch function passing the url of the API as a parameter
 
 */
 
-
 // APPROACH-2 With async-await
 
-// The async keyword will automatically create a new Promise and return it.
+// The async keyword will automatically create a new Promise and return it. Any async function returns a promise implicitly, and the resolve value of the promise will be whatever you return from the function
 
 const getJSONAsync = async () => {
-
   // The await keyword saves us from having to write a .then() block.
-  let json = await fetch('https://tutorialzine.com/misc/files/example.json')
-
-  return json && console.log('Fetched with async');
+  let json = await fetch("https://tutorialzine.com/misc/files/example.json");
 
-}
+  return json && console.log("Fetched with async");
+};
 
-getJSONAsync()  // Will fetch and then print "Fetched with async"
+getJSONAsync(); // Will fetch and then print "Fetched with async"
 
 /* The await expression causes async function execution to pause until a Promise is resolved, that is fulfilled or rejected, and to resume execution of the async function after fulfillment. When resumed, the value of the await expression is that of the fulfilled Promise.
 
@@ -71,4 +66,4 @@ const foo = async () => {
 
 Other than the syntax used, both functions are completely identical - they both return Promises and resolve with the JSON response from fetch().
 
-*/
+*/

Javascript/Promise-master-notes/README.md renamed to Promise-Async-Await-Sequential-Execution/Promise-async-await-master-notes/README.md

@@ -0,0 +1,83 @@
+First note, - **Await works only with Promises, it does not work with callbacks. So to implement async-await to a function/code, I first have to convert the callback to a Promise **
+
+Fist let's take the simplest of example. `setTimeout` is a straightforward browser API that waits for a specified period of time and then executes a callback. A standard use looks like this:
+
+```js
+function doStuff() {
+  /_..._/;
+}
+
+setTimeout(doStuff, 300);
+```
+
+A Promise-based API for this function would likely look something like this code.
+
+`timeout(300).then(doStuff)`
+
+We can create an API like that using setTimeout. To do that, we’ll need a function timeout which takes a timeout variable and returns a Promise.
+
+You can define A+ compliant Promises using the Promise constructor, which expects a single function as an argument. That function takes 2 arguments, a resolve function and a reject function. The wonderful thing is that under the covers these are just callback functions that the Promise api glosses over.
+
+```js
+function timeout(delay) {
+  return new Promise(function(resolve, reject) {
+    setTimeout(resolve, delay);
+  });
+}
+```
+
+We don’t use the reject callback, since setTimeout doesn’t provide any hooks for an error state. So we pass resolve as the callback to setTimeout, and that is all we need. Now we have a great chainable setTimeout function that we could include in a Promise chain.
+
+##### Now lets do a slightly more complicated version of the same exercise
+
+[Source Code](https://github.com/coreyc/converting-callbacks/blob/master/index.js)
+
+#### Callback version
+
+```js
+const callbackFn = (firstName, callback) => {
+  setTimeout(() => {
+    if (!firstName) return callback(new Error("no first name passed in!"));
+
+    const fullName = `${firstName} Doe`;
+
+    return callback(fullName);
+  }, 2000);
+};
+
+callbackFn("John", console.log);
+callbackFn(null, console.log);
+```
+
+We're using the setTimeout() function in order to make our function asynchronous. In addition to setTimeout(), other asynchronous operations you're likely to see in the real-world are: AJAX and HTTP calls, database calls, filesystem calls (in the case of Node, if no synchronous version exists), etc.
+
+In this function, we "reject" it if the first name argument is null. When we do pass in the firstName argument, the callback function (almost always the last argument in a callback-based function's argument list) gets called and returns our value after the 2 seconds set in setTimeout().
+
+#### Promise version - And here's the Promise-based version of that function:
+
+```js
+const promiseFn = firstName => {
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      if (!firstName) reject(new Error("no first name passed in!"));
+
+      const fullName = `${firstName} Doe`;
+
+      resolve(fullName);
+    }, 2000);
+  });
+};
+
+promiseFn("Jane").then(console.log);
+promiseFn().catch(console.log);
+```
+
+Converting to a Promise-based function is actually pretty simple. Look at the below diagram for a visual explanation:
+
+<img src="convert-callback-to-promise-async-await-1.png">
+
+#### Further reading
+
+1> https://benmccormick.org/2015/12/30/es6-patterns-converting-callbacks-to-promises
+
+2> https://dev.to/ccleary00/how-to-rewrite-a-callback-function-in-promise-form-and-asyncawait-form-in-javascript-410e

Javascript/Promise-master-notes/calback-hell-resolved-with-promise.js renamed to Promise-Async-Await-Sequential-Execution/Promise-async-await-master-notes/calback-hell-resolved-with-promise.js

@@ -14,7 +14,7 @@ I can use async and await
   }
 ```
 
-A very importnat use case of this is, when restting password. Before resetting the password, I have to make sure, that the unique-link sent to the user is  valid (Not expired and the same that was sent to him) - So, for this, in the same password-reset function, I have to first make an axios call to an API endpoint, which will validate that the link sent to the user is valid. And only if this API call returns a valid respoonse, I will fire the second API call to the endpoint to actually reset the password.
+A very important use case of this is, when resetting password. Before resetting the password, I have to make sure, that the unique-link sent to the user is valid (Not expired and the same that was sent to him) - So, for this, in the same password-reset function, I have to first make an axios call to an API endpoint, which will validate that the link sent to the user is valid. And only if this API call returns a valid respoonse, I will fire the second API call to the endpoint to actually reset the password.
 
 Extract from a PasswordReset Component production grade project below
 
@@ -96,4 +96,4 @@ Extract from a PasswordReset Component production grade project below
 
 #### Further Reading
 
-https://stackoverflow.com/questions/47343225/making-2-sequential-requests-with-axios-second-request-depends-on-the-response
+https://stackoverflow.com/questions/47343225/making-2-sequential-requests-with-axios-second-request-depends-on-the-response