JS Concepts : Call backs,promise,async,await

Promises : Easy to write async code

function loadScript(src, callback) {
  let script = document.createElement('script');
  script.src = src;

  script.onload = () => callback(script);

  document.head.append(script);
}

loadScript('/my/script.js', function() {
  // the callback runs after the script is loaded
  newFunction(); // so now it works
  ...
});

PYRAMID OF DOOM 

The “pyramid” of nested calls grows to the right with every asynchronous action. Soon it spirals out of control.




Solving pyramid of doom by promise chaining
-

-


ASYNC

The word “async” before a function means one simple thing: a function always returns a promise. If the code has return  in it, then JavaScript automatically wraps it into a resolved promise with that value.


The keyword await makes JavaScript wait until that promise settles and returns its result.

-

-

What is Promise ? When to use Promise API methods ?

The constructor syntax for a promise object is:

let promise = new Promise(function(resolve, reject) {
  // executor (the producing code, "singer")
});

The function passed to new Promise is called executor. When the promise is created, it’s called automatically. It contains the producing code, that should eventually finish with a result. In terms of the analogy above, the executor is a “singer”.

The resulting promise object has internal properties:

• state – initially is “pending”, then changes to “fulfilled” or “rejected”,
• result – an arbitrary value, initially undefined.

When the executor finishes the job, it should call one of:

• resolve(value) – to indicate that the job finished successfully:
  • sets state to "fulfilled",
  • sets result to value.
• reject(error) – to indicate that an error occurred:
• sets state to "rejected",
• sets result to error.

-

-

Promise API methods  (In progress )

• Resolve
• Reject
• All
• Trace