Promises

• placeholder for a future value
• deals with one asynchronous event at a time
• emits a single value at a time
• pushes the erros to the child promises
• does not have cancellable subscriptions
• does not provide any operations

• resolve
• reject
• defer

What is a promise?

a promise represents the eventual result of an operation. You can use a promise to specify what to do when an operation eventually succeeds or fails.

• handle asynchronous
• native to JS from ES6

let promise = new Promise(function(resolve, reject) {
   if (/* some async task is all good */) {
       resolve('Success!');
   } else {
    reject('Oops... something went wrong');
  }
}); 


promise.then(data => {
  console.log(data);
});

JavaScript Promises:

• With the introduction of native promises in ECMAScript 2015 (ES6), developers could use promises directly in JavaScript without relying on external libraries.
• Promises are a programming pattern for handling asynchronous operations in JavaScript, providing a more structured and readable way to work with asynchronous code.
• The Promise concept was first introduced in the CommonJS Promises/A proposal in 2010, which aimed to standardize asynchronous programming in JavaScript.
• Promises represent a value that may be available now, in the future, or never. They have three states: pending, fulfilled, or rejected.
• Promises provide methods such as then() and catch() to handle the resolved value or error of an asynchronous operation.
• Promises help avoid the "callback hell" problem by allowing asynchronous operations to be chained together.

Define new Promise object

const promise = new Promise(function(resolve, reject) {
  setTimeout(function() {
    resolve('Promise returns after 1.5 second!');
  }, 1500);
});

promise.then(function(value) {
  console.log(value);
  // Promise returns after 1.5 second!
});

We defined the Promise object with a new keyword and It is also knows as constructor. A Promise constructor is meant to be the executor, and It takes two parameters resolve and reject.

The resolve() function is invoked when the asynchronous task is completed and renders the result of the assigned tasks. In our case, we declared the setTimeout method, this timer function will be invoked after 1.5 seconds.

function getResultsFromServer(pollName){

 return new Promise(function(resolve, reject){
  let url = `/results/${pollName}`;
  let request = new XMLHttpRequest();
  request.open('GET',url, true);
  request.onload = function(){
   if(request.status >= 200 && request.status < 400){
    resolve(JSON.parse(request.response));
   }
  };
  // ...
  request.send();
 })
}

allSettled() - when all inputs are settled either fulfilled or rejected

finally

The newly introduced finally callback is called regardless of success or failure

---

What is the difference between these four promises?

doSomething().then(function () {
  return doSomethingElse();
});

doSomething().then(function () {
  doSomethingElse();
});

doSomething().then(doSomethingElse());

doSomething().then(doSomethingElse);

---

saveApplication()
    .then(uploadImages)
    .then(saveService)
    .then(savePricingInfo)
    .then(savePaymentInfo)
    .then(gotoMainPage)
    .catch((step) => {
        setErrorState();
        multiStepManager.go(step);
    });

terminology

• resolved / fulfilled: a promise does not necessarily need to begin in a pending state and utilize an executor function to reach a settled state. It is possible to instantiate a promise in the "resolved" state by invoking the Promise.resolve() static method
• rejected: instantiates a rejected promise and throws an asynchronous error
• pending
• settled

Race

In JavaScript, the Promise.race() function is used to create a new promise that is settled (fulfilled or rejected) as soon as any of the promises in an iterable resolves or rejects. However, the Promise.race() function does not inherently handle asynchronous behavior. It simply returns a new promise that resolves or rejects based on the first promise that settles.

Here's an example of using Promise.race() with asynchronous functions:

const asyncFunction1 = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Async Function 1');
    }, 2000);
  });
};

const asyncFunction2 = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Async Function 2');
    }, 1000);
  });
};

Promise.race([asyncFunction1(), asyncFunction2()])
  .then(result => {
    console.log('The fastest promise:', result);
  })
  .catch(error => {
    console.error('Error occurred:', error);
  });

In the above example, Promise.race() is used with two asynchronous functions (asyncFunction1 and asyncFunction2). The promises returned by these functions resolve after a certain timeout period. The Promise.race() function creates a new promise that resolves or rejects based on the first promise that settles.

In this case, since asyncFunction2 has a shorter timeout period, it resolves before asyncFunction1. Therefore, the output will be:

The fastest promise: Async Function 2

This demonstrates how Promise.race() can be used with asynchronous functions to determine which one resolves or rejects first.

Promises are continuation monad in JS, the following is true

Promise.resolve(Promise.resolve(x)) === Promise.resolve(x).