convert callback to async-await directly

Author: rohan-paul

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

@@ -1,5 +1,7 @@
 #### A promise is an object that wraps an asynchronous operation and notifies when it’s done. This sounds exactly like callbacks, but the important differences are in the usage of Promises. Instead of providing a callback, a promise has its own methods (.then) which you call to tell the promise what will happen when it is successful or when it fails. The methods a promise provides are “then(…)” for when a successful result is available and “catch(…)” for when something went wrong.
 
+In other words, **When we call a Promise function, the result from the successful path will show up in the .then(), while the error scenario will show up in the .catch()**
+
 #### It takes 2 arguments and both are callback functions. The first one is for the fullfilment case and the socond one is for the rejection case.
 
 #### Promise in JS means, just as the word meaning, i.e. its not the value itself, but its the promise of a value.
@@ -9,38 +11,32 @@
 Promises provide a simpler alternative for executing, composing, and managing asynchronous operations when compared to traditional callback-based approaches. They also allow you to handle asynchronous errors using approaches that are similar to synchronous try/catch.
 Promise is basically just an object with 2 functions. A) A function named then() whcih is called anytime the promise is successful, and B) catch() function, which is called anytime something bad has happened.
 
-### All promise instances get a then method which allows you to react to the promise.  The first then method callback receives the result given to it by the resolve() call: The then method on the promise object adds handlers for the resolved and rejected states. This function returns another promise object to allow for promise-pipelining, enabling the developer to chain together async operations where the result of the first operation will get passed to the second.
-
+### All promise instances get a then method which allows you to react to the promise. The first then method callback receives the result given to it by the resolve() call: The then method on the promise object adds handlers for the resolved and rejected states. This function returns another promise object to allow for promise-pipelining, enabling the developer to chain together async operations where the result of the first operation will get passed to the second.
 
 Promises have a then method, which you can use to get the eventual return value (fulfillment) or thrown exception (rejection).
 
 ```js
-promiseMeSomething()
-    .then(function (value) {
-  }, function (reason) {
-});
+promiseMeSomething().then(function(value) {}, function(reason) {});
 ```
 
-``then(resolvedHandler, rejectedHandler); ``
+`then(resolvedHandler, rejectedHandler);`
 
 If promiseMeSomething returns a promise (remember that 'then' method returns a promise) that gets fulfilled later with a return value, the first function (the fulfillment handler) will be called with the value. However, if the promiseMeSomething function gets rejected later by a thrown exception, the second function (the rejection handler) will be called with the exception.
 
 Note that resolution of a promise is always asynchronous: that is, the fulfillment or rejection handler will always be called in the next turn of the event loop (i.e. process.nextTick in Node). This gives you a nice guarantee when mentally tracing the flow of your code, namely that then will always return before either handler is executed.
 
 ```js
 new Promise(function(resolve, reject) {
-	// A mock async action using setTimeout
-	setTimeout(() => resolve(10), 1000);
-})
-.then((result) => {
-	console.log(result);
+  // A mock async action using setTimeout
+  setTimeout(() => resolve(10), 1000);
+}).then(result => {
+  console.log(result);
 });
 
 // Outputs 10 after 1000 ms
-
 ```
 
-### The then callback is triggered when the promise is resolved.  You can also chain then method callbacks:
+### The then callback is triggered when the promise is resolved. You can also chain then method callbacks:
 
 ```js
 new Promise(function(resolve, reject) {
@@ -66,19 +62,21 @@ Second then: 20
 Third then: 40
 
 ```
+
 ### Each then receives the result of the previous then's return value. If a promise has already resolved but then is called again, the callback immediately fires. If the promise is rejected and you call then after rejection, the callback is never called.
 
 If you return a value, the next "then" is called with that value. However, if you return something promise-like, the next "then" waits on it, and is only called when that promise settles (succeeds/fails)
 
 ```js
-fetchData().
-    then(prepareDataForCsv).
-    then(writeToCsv).
-    then(function () {
-    console.log('your csv has been saved');
-}).catch(function (error) {
-    console.log('something went wrong', error);
-});
+fetchData()
+  .then(prepareDataForCsv)
+  .then(writeToCsv)
+  .then(function() {
+    console.log("your csv has been saved");
+  })
+  .catch(function(error) {
+    console.log("something went wrong", error);
+  });
 ```
 
 ## Because of how the chaining of promises and errors work, as discussed earlier, it means that just one catch at the end of the chain is guaranteed to catch any errors thrown along the way. This makes error handling really straight forward.
@@ -93,7 +91,7 @@ A> http://farzicoder.com/Callback-Hell-Promises-generators-Async-Await-in-Node-j
 
 https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-promise-27fc71e77261
 
-Because ``.then()`` always returns a new promise, it’s possible to chain promises with precise control over how and where errors are handled. Promises allow you to mimic normal synchronous code’s try/catch behavior.
+Because `.then()` always returns a new promise, it’s possible to chain promises with precise control over how and where errors are handled. Promises allow you to mimic normal synchronous code’s try/catch behavior.
 
 Like synchronous code, chaining will result in a sequence that runs in serial. In other words, you can do:
 
@@ -104,4 +102,4 @@ fetch(url)
   .catch(handleErrors);
 ```
 
-Assuming each of the functions, fetch(), process(), and save() return promises, process() will wait for fetch() to complete before starting, and save() will wait for process() to complete before starting. handleErrors() will only run if any of the previous promises reject.
+Assuming each of the functions, fetch(), process(), and save() return promises, process() will wait for fetch() to complete before starting, and save() will wait for process() to complete before starting. handleErrors() will only run if any of the previous promises reject.

Promise-Async-Await-Sequential-Execution/async-await-master-notes/convert-callback-to-async-await-directly.png

@@ -16,7 +16,7 @@ A Promise-based API for this function would likely look something like this code
 
 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.
+You can define A+ compliant Promises using the Promise constructor, which expects a single function as an argument. That function takes 2 arguments (both are callbacks), 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) {
@@ -32,7 +32,7 @@ We don’t use the reject callback, since setTimeout doesn’t provide any hooks
 
 [Source Code](https://github.com/coreyc/converting-callbacks/blob/master/index.js)
 
-#### Callback version
+### Callback version
 
 ```js
 const callbackFn = (firstName, callback) => {
@@ -53,7 +53,7 @@ We're using the setTimeout() function in order to make our function asynchronous
 
 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:
+### Promise version - And here's the Promise-based version of that function:
 
 ```js
 const promiseFn = firstName => {
@@ -76,6 +76,76 @@ Converting to a Promise-based function is actually pretty simple. Look at the be
 
 <img src="convert-callback-to-promise-async-await-1.png">
 
+First, we remove the callback argument. Then we add the code to return a new Promise from our Promise-based function. The error callback becomes a reject, while the "happy path" callback becomes a resolve.
+
+Remember, Promise expects a single function as an argument. That function takes 2 arguments (both are callbacks), a resolve function and a reject function.
+
+**When we call the promiseFn, the result from the happy path will show up in the .then(), while the error scenario will show up in the .catch()**
+
+The great thing about having our function in Promise form is that we don't actually need to "make it an async/await version" if we don't want to. When we call/execute the function, we can simply use the async/await keyword, like so:
+
+(Remember - **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 **)
+
+```js
+const result = (async () => {
+  try {
+    console.log(await promiseFn("Jim"));
+  } catch (e) {
+    console.log(e);
+  }
+
+  try {
+    console.log(await promiseFn());
+  } catch (e) {
+    console.log(e);
+  }
+})();
+```
+
+Side note: here I wrapped the function call in an IIFE (IIFE = "Immediately Invoked Function Execution") This is simply because we need to wrap the await call in a function that uses the async keyword. Here, there are no callbacks, no .then()'s or .catch()'s, we just use a try/catch block and call the promiseFn(). Promise rejections will be caught by the catch block.
+
+### async/await version
+
+But what if we wanted to convert a callback function directly to an async/await version of that function? Without using Promises directly?
+
+```js
+const timeout = ms => {
+  return new Promise(resolve => setTimeout(resolve, ms));
+};
+
+const asyncAwaitFn = async firstName => {
+  await timeout(2000); // using timeout like this makes it easier to demonstrate callback -> async/await conversion
+
+  if (!firstName) throw new Error("no first name passed in!");
+
+  const fullName = `${firstName} Doe`;
+
+  return fullName;
+};
+
+const res = (async () => {
+  try {
+    console.log(await asyncAwaitFn("Jack"));
+  } catch (e) {
+    console.log(e);
+  }
+
+  try {
+    console.log(await asyncAwaitFn());
+  } catch (e) {
+    console.log(e);
+  }
+})();
+```
+
+Use the below diagram to understand how to go from callback to async
+
+<img src="convert-callback-to-async-await-directly.png">
+
+Similar to converting to the Promise-based version, we get rid of the callback passed in to the original function, as well as that argument call within the body of the function. Next, we add the async keyword to the beginning of the function declaration. And finally, when we hit the error scenario, we throw an Error, which results in a rejected Promise (caught in the catch block when we call the function), and simply return the fullName in the happy path scenario.
+
+Note that async functions all return Promises, so when you use return you are just resolving the Promise.
+
 #### Further reading
 
 1> https://benmccormick.org/2015/12/30/es6-patterns-converting-callbacks-to-promises