Promises
Wasiu Idowu

Wasiu Idowu

Oct 7, 2022

Promises

A JavaScript Promise is created with the new Promise constructor function - new Promise(). A promise will let you start some work that will be done asynchronously and let you get back to your regular work. When you create the promise, you must give it the code that will be run asynchronously. You provide this code as the argument of the constructor function:

new Promise(function () { 
   window.setTimeout(function createSundae(flavor = 'chocolate') { 
       const sundae = {}; 
 }, Math.random() * 2000);
});

This code creates a promise that will start in a few seconds after I make the request. Then there are a number of steps that need to be made in the createSundae function.

Indicated a Successful Request or a Failed Request

But once that's all done, how does JavaScript notify us that it's finished and ready for us to pick back up? It does that by passing two functions into our initial function. Typically we call these resolve and reject.

The function gets passed to the function we provide the Promise constructor - typically the word "resolve" is used to indicate that this function should be called when the request completes successfully. Notice the resolve on the first line:

new Promise(function (resolve, reject) {    
     window.setTimeout(function createSundae(flavor = 'chocolate') { 
     const sundae = {};       
      resolve(sundae);   
 }, Math.random() * 2000);
});

Now when the sundae has been successfully created, it calls the resolve method and passes it the data we want to return - in this case the data that's being returned is the completed sundae. So the resolve method is used to indicate that the request is complete and that it completed successfully .

If there is a problem with the request and it couldn't be completed, then we could use the second function that's passed to the function. Typically, this function is stored in an identifier called "reject" to indicate that this function should be used if the request fails for some reason. Check out the reject on the first line:

new Promise(function (resolve, reject) {    
   window.setTimeout(function createSundae(flavor = 'chocolate') {      
   const sundae = {};        
      if ( /* iceCreamConeIsEmpty(flavor) */ ) {           
        reject(`Sorry, we're out of that flavor :-(`);  
      }        
      resolve(sundae);  
  }, Math.random() * 2000);
});

So the reject method is used when the request could not be completed . Notice that even though the request fails, we can still return data - in this case we're just returning text that says we don't have the desired ice cream flavor.

A Promise constructor takes a function that will run and then, after some amount of time, will either complete successfully (using the resolve method) or unsuccessfully (using the rejectmethod). When the outcome has been finalized (the request has either completed successfully or unsuccessfully), the promise is now fulfilled  and will notify us so we can decide what to do with the response.

Promises Return Immediately

The first thing to understand is that a Promise will immediately return an object.

const myPromiseObj = new Promise(function (resolve, reject) {   
 // sundae creation code
});

That object has a .then() method on it that we can use to have it notify us if the request we made in the promise was either successful or failed. The .then() method takes two functions:

  1. the function to run if the request completed successfully

  2. the function to run if the request failed to complete

mySundae.then(function(sundae) {  
  console.log(`Time to eat my delicious ${sundae}`);
},
function(msg) { 
   console.log(msg); 
   self.goCry(); // not a real method
});

As you can see, the first function that's passed to .then() will be called and passed the data that the Promise's resolve function used. In this case, the function would receive the sundae object. The second function will be called and passed the data that the Promise's reject function was called with. In this case, the function receives the error message "Sorry, we're out of that flavor :-(" that the reject function was called with in the Promise code above

Wasiu Idowu

Wasiu Idowu

Wasiu breaks down complex topics into smaller, simpler bits

Leave a Reply

5 Comments

Agatha on Oct 25, 2022

Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum, asperiores eaque blanditiis repellendus ducimus totam error incidunt? Neque, error adipisci?

Mandy Mandolorian on Oct 25, 2022

Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae maxime asperiores porro sint dolores quibusdam, aspernatur odit assumenda explicabo rem vero quae quasi, cum sed consequatur commodi error totam doloribus temporibus qui quas! Vero praesentium ullam quisquam quis eum, adipisci incidunt veniam possimus numquam! Fuga iusto praesentium provident nisi numquam.

Ladeep on Oct 11, 2022

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor eveniet qui quis aliquam sunt esse itaque quaerat quo beatae nesciunt officia explicabo, corrupti quasi aut quisquam eum libero? Ea porro maiores debitis! Repellendus corrupti quaerat nisi assumenda consequatur saepe, fugit itaque inventore, quod dolorem est vero tempore numquam architecto aliquam.

Mandy Mandolorian on Oct 9, 2022

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi aliquid libero repellendus praesentium hic incidunt possimus quis eos laudantium consequuntur odit vel, maiores soluta natus dolores architecto dignissimos nisi culpa deleniti dolor. Exercitationem officia enim eveniet debitis tempore quia quaerat consectetur assumenda asperiores vel repudiandae quas libero, nobis ad natus ipsa fuga quae odio. Ipsa numquam alias, reiciendis eius laboriosam consequatur ab, corporis maxime nam ad fugiat aut! Molestias, veritatis. Velit eligendi est atque quisquam numquam similique cupiditate nisi consequatur labore vero odio, itaque asperiores voluptatum veniam expedita illo voluptas doloremque? Iure, esse soluta! Eligendi ex sapiente omnis nisi provident.

Ian kirkby on Oct 9, 2022

Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, aut totam? Sapiente esse nulla molestias quas quo nobis consequuntur voluptatem.

Related Posts

Categories