Nolan Hughes

Last week I went over the keywords async and await and thought it might be a good idea to touch on Promises a little bit since they are directly tied with those keywords. Since this is a fairly involved topic I'm going to split it into multiple parts. This first part will essentially be a general overview.

The Promise object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value.

-MDN web docs

A Promise is an object that is used for asynchronous code and basically says that this task will complete eventually. It will produce a single value which will be a resolved value, or a reason that it’s not resolved.

A Promise has three possible states: Fulfilled, Rejected, and Pending. A great comparison for the sake of understanding this concept would be when you order from a fast food restaurant. You place your order at the register (e.g., sending a request to a server), and then the cashier gives you a receipt (the Promise). At this point you have been promised to be delivered your food but all you have is your receipt. The Promise would have a pending state at this point in time. Once your correct order of food is delivered to you that would be the same as if a Promise was fulfilled. If something went wrong, like if they forgot to include your fires, this would be a rejected Promise because there was an error with the order.

Let's look at an example of loading an image so that this concept is solidified.


              function getImage(url){
                return new Promise(function(resolve, reject){
                  var img = new Image()
                  img.onload = function(){
                    resolve(url)
                  }
                  img.onerror = function(){
                    reject(url)
                  }
                  img.src = url
                })
              }


              getImage('https://images.pexels.com/photos/20787/pexels-photo.jpg').then(function(successurl){
                var img = document.createElement("img");
                img.src = successurl;
                document.getElementById('body').appendChild(img) 
              })

Let's go over what's going on here. We are declaring a function called getImage() that will be passed an argument of an image url. In that function we are going to return a Promise. It has an anonymous function with arguments resolve and reject.

[This function] normally initiates some asynchronous work, and then, once that completes, either calls the resolve function to resolve the promise or else rejects it if an error occurred. If an error is thrown in the executor function, the promise is rejected. The return value of the executor is ignored.

-MDN web docs

So if the image loads the resolve function is called, but if there is an error, the reject function is called. The next section of code, calling the getImage() function, is pretty straight forward but there is one thing I want to touch on.

This would be .then method. .then is run after the previous Promise is completed. It's a great way of chaining multiple tasks together and perform one action after another. I go over how to deal with this in an even more sleek way in my previous blog post about async and await.

In my next posts I'll go into more of the details regarding Promises like error propagation and common mistakes when using them.

Promises

Part 1

Posted by Nolan Hughes on October 27th, 2018