Promises

I cannot help but hear the song Promises by 3LW when we talk about Promises in Javascript.

Analogy inspired by Javascript Modern Tutorial :

Imagine that you are Rihanna, and fans ask you day and night for your upcoming single, but you keep ignoring them.

To get some relief, you promise to upload it when you are finished. You give your fans a Fenty list. They can fill in their email addresses, so that when the album becomes available, all subscribed parties instantly receive it. And even if something goes very wrong, say, you decided to only focus on your makeup and clothing brand, and you don't want to upload an album anymore, they will still be notified.

Everyone is happy: you, because the people don’t spam your instagram comments, and fans, because they believe that you will one day upload a summer album.

Below is directly from Javascript Modern Tutorial: This is a real-life analogy for things we often have in programming:

1. A “producing code” that does something and takes time. For instance, some code that loads the data over a network. That’s Rihanna.
2. A “consuming code” that wants the result of the “producing code” once it’s ready. Many functions may need that result. These are the “fans”.
3. A promise is a special JavaScript object that links the “producing code” and the “consuming code” together. In terms of the analogy: this is the “subscription list”. The “producing code” takes whatever time it needs to produce the promised result, and the “promise” makes that result available to all of the subscribed code when it’s ready.

Note

• The analogy isn’t accurate, because JavaScript promises are more complex than a simple subscription list: they have additional features and limitations. But it’s fine to begin with.

So what is a promise?

A promise is an object that represents a value that is or will be the result of an asynchronous process. A promise is always in one of three states: pending, resolved, or rejected. When a promise is resolved or rejected, we say that it is settled. Once a promise is settled, it cannot transition to another state.

//Fetch at a high level, quick intro
const songPromise = fetch("http://rihanna.com/new-album")

songPromise
  .then(songs => album.json()) //will only fire when the data comes back successfully
  .then(songs => {
    console.log(songs)
  }) //Then is a method, it takes up to two callbacks
  .catch(err => {
    //catches any errors that happen along the way
    console.log(err)
  })

The Promise Constructor

ES6 has promises built in.

To create your own promise, you create a variable, and store a new promise in it.

The Promise constructor takes one function which passes you resolve and reject.

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(Error("The Album will be released June 2020"))
  }, 1000)
})

myPromise
  .then(data => {
    console.log(data)
  })
  .catch(err => {
    console.log(err)
  })

The Promise constructor is only used for promisifying ascynchronous functions. It invokes resolve and revoke callbacks to asynchronously send values, and there are no retutn values.