How Do Promises Work?

But first...

When your browser or server goes to get a web page or some other form of data, a request is sent. 

How does async work?

Request

In the mean time...

While your computer is waiting for a message to return, it gets to do a bunch of other stuff!

This type of behavior is called "non-blocking". This is what makes javascript (and node) so powerful. 

You don't have to sit around watching a buffering icon or loading bar until the request finishes. You can continue doing other things!

When a request comes back, we call it a response. Once your computer receives a response, it runs a callback function.

When the request finishes...

var request = require('request');

// your computer sends a get request to a url.
request.get('http://www.somerandomwebsite.com', function(err, res, body) {
    // the callback is triggered and you can write awesome code here
};

This function can whatever you program it to do, but the callback will almost always have access to three objects: the error, response, and body objects. 

Response

Err

Res

Body

What could possibly go wrong?

A lot!

Lets say you want to get the movie Frozen from an online database and display it on your webpage

// the JQuery version of a get request

var movies = [];

$.get('http://www.omdbapi.com/?t=Frozen&y=&plot=short&r=json', function(data) {

    movies.push(data); //callback is ran when the JSON data get recieved
});

// Javascript doesn't wait for the request to come back and executes the next
// line of code.

renderMoviesToThePage(movies);  // There is nothing in the array right now

The quick fix

Move your subsequent functions inside of your callbacks

But what if you have multiple asynchronous requests?

// Callback hell example
var movies = [];
$.get('http://www.omdbapi.com/?t=Frozen&y=&plot=short&r=json', function(data) {
    movies.push(data);
    $.get('http://www.omdbapi.com/?t=Big+Hero+6&y=&plot=short&r=json', function(data) {
        movies.push(data);
        $.get('http://www.omdbapi.com/?t=Aladin&y=&plot=short&r=json', function(data) {
            movies.push(data);
            $.get('http://www.omdbapi.com/?t=Up&y=&plot=short&r=json', function(data) {
                 movies.push(data);
                 renderMoviesToThePage(movies);
            });
        });
    });
});

With nested callbacks it becomes very difficult for a developer to reason about code

What is a promise?

A promise is a different way of structuring and handling your asynchronous functions in a way that is more intuitive than nesting callbacks. This allows a developer to reason about their code in a more predictable manner.

In laymen's terms a promise is saying "I promise to tell you whether the operation was fulfilled or rejected. Then, I will process the data for you."

Promises are a placeholder that represent an asynchronous function's return value before the resolution of that function. Upon resolution, a promise can either have a state of fulfilled or rejected.

Promises in javascript

Here is how a promise in javascript is structured