asyn-await-how-its-called-asynchronous-when-it-makes-possible-to-execute-in-synchrounous-manner

Author: rohan-paul

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

@@ -1,8 +1,20 @@
 #### 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.
 
+More simply - The Promise constructor function takes in a single argument, a (callback) function. This function is going to be passed two arguments, resolve and reject.
+
+**resolve** - a function that allows you to change the status of the promise to fulfilled
+
+**reject** - a function that allows you to change the status of the promise to rejected.
+
+### How do you listen for when the status of a promise changes?
+
+This is the most important question. It’s cool we know how to create a promise and change its status, but that’s worthless if we don’t know how to do anything after the status changes.
+
+What a promise actually is. When you create a new Promise, you’re really just creating a plain old JavaScript object. This object can invoke two methods, then, and catch. Here’s the key. When the status of the promise changes to fulfilled, the function that was passed to .then will get invoked. When the status of a promise changes to rejected, the function that was passed to .catch will be invoked. What this means is that once you create a promise, you’ll pass the function you want to run if the async request is successful to .then. You’ll pass the function you want to run if the async request fails to .catch.
+
 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.
+#### It takes 2 arguments and both are callback functions. The first one is for the fullfilment case and the second 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.
 
@@ -103,3 +115,7 @@ fetch(url)
 ```
 
 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.
+
+#### Further Reading
+
+1> [ECMAScript 2019 Language Specification Draft ECMA-262 / June 27, 2018](https://tc39.github.io/ecma262/#sec-promise-constructor)

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

@@ -92,3 +92,13 @@ doSomethingAsync().
 ```
 
 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.
+
+**By wrapping the logic inside an async function, we can replace the then callbacks with await statements. The effect, the code pauses execution on those lines until the Promises resolve! Asynchronous programming becomes synchronous!**
+
+Async/Await enables us to write asynchronous code in a synchronous fashion, which produces cleaner and easier-to-understand logic. Under the hood, it’s just syntactic sugar using [generators and yield statements to “pause” execution](https://tc39.github.io/ecmascript-asyncawait/#async-function-definitions). In other words, async functions can “pull out” the value of a Promise even though it’s nested inside a callback function, giving us the ability to assign it to a variable!
+
+##### Further Reading
+
+1> [Official ES6 Drafts](https://tc39.github.io/ecmascript-asyncawait/#async-function-definitions)
+
+2> [https://medium.com/siliconwat/how-javascript-async-await-works-3cab4b7d21da](https://medium.com/siliconwat/how-javascript-async-await-works-3cab4b7d21da)

Promise-Async-Await-Sequential-Execution/async-await-master-notes/asyn-await-how-its-called-asynchronous-when-it-makes-possible-to-execute-in-synchrounous-manner.md

@@ -0,0 +1,33 @@
+async-await uses Generators to resolve and wait for Promise.
+
+await is asynchronous in async-await, when compiler reach at await it stops executing and push everything into event queue and continue with synchronous code after async function.
+
+```js
+function first() {
+  return new Promise(resolve => {
+    console.log(2);
+    resolve(3);
+    console.log(4);
+  });
+}
+
+async function f() {
+  console.log(1);
+  let r = await first();
+  console.log(r);
+}
+
+console.log("a");
+f();
+console.log("b");
+```
+
+Since await is asynchronous thus every other thing before await happens as usual
+
+a
+1
+2
+4
+b
+// asynchronous happens
+3

Promise-Async-Await-Sequential-Execution/async-await-master-notes/converting-callback-to-Promise-and-async-await-1.md

@@ -153,3 +153,5 @@ Note that async functions all return Promises, so when you use return you are ju
 2> https://dev.to/ccleary00/how-to-rewrite-a-callback-function-in-promise-form-and-asyncawait-form-in-javascript-410e
 
 3> https://medium.com/front-end-weekly/callbacks-promises-and-async-await-ad4756e01d90
+
+4> https://tylermcginnis.com/async-javascript-from-callbacks-to-promises-to-async-await/

Promise-Async-Await-Sequential-Execution/sequential-execution-of-codes-React-Node-Context-Master-Notes/Async-await-API-call-Simple-Example-synchronous-Fetchl-Simple-Good-Example.md

@@ -0,0 +1,35 @@
+### Transform the following code with sequential execution. I want to fire second request based on one value returned by the first request.
+
+For example, the Fetch API provides an interface for making network requests, returning Promises for us to resolve. To use it to get the current weather in Long Beach, we chain together two then callbacks:
+
+```js
+fetch("https://api.com/values/1")
+  .then(response => response.json())
+  .then(json => console.log(json));
+```
+
+In the first, we create a callback function to receive the Response object and return back its JSON data. In the second, we create a callback that receives that data and then logs it to the console.
+
+Need to wrap it inside an async function to make the async-await mechanism work.
+
+```js
+const request = async () => {
+  const response = await fetch("https://api.com/values/1");
+  const json = await response.json();
+  console.log(json);
+};
+
+request();
+```
+
+In the first line, we make a GET request to https://api.com/values/1. Instead of continuing to the next line, we wait for the request to finish, hence await. When it finishes, it passes the resolved value to the _response_ variable.
+
+In the second line, we get the JSON version of the response. Again, we use await so we can wait for it to complete (or fail) and then pass the result to the json variable.
+
+**By wrapping the logic inside an async function, we can replace the then callbacks with await statements. The effect, the code pauses execution on those lines until the Promises resolve! Asynchronous programming becomes synchronous!**
+
+Async/Await enables us to write asynchronous code in a synchronous fashion, which produces cleaner and easier-to-understand logic. Under the hood, it’s just syntactic sugar using [generators and yield statements to “pause” execution](https://tc39.github.io/ecmascript-asyncawait/#async-function-definitions). In other words, async functions can “pull out” the value of a Promise even though it’s nested inside a callback function, giving us the ability to assign it to a variable!
+
+#### Further Reading
+
+https://dev.to/johnpaulada/synchronous-fetch-with-asyncawait