CODEWITHSUNDEEP
javascriptecmascript-6promise
JeremyGiffARCA
JeremyGiffARCA

Reputation: 37

Having trouble fully understanding Promises in Javascript

So I mostly understand how to properly write an ES6 style promise and how to make it work. But now I am trying to understand how everything works behind the curtain.

I have researched it for hours and can't find anything that quite answers my question (At least in simple enough terms for me to comprehend). One of the most confusing parts for me is the .reslove() and .reject() callbacks that are parameters for the anonymous function passed into the Promise constructor.

As you can see in my code below the resolve() and reject() functions are called in my conditional statement depending on if let bool is true or false.

How am I able to call the resolve and reject functions INSIDE the anonymous function?

Who calls resolve and reject? In a normal callback you have a function name being passed into another functions arguments allowing you to call that passed function inside the main function by it's parameter name. But what is being passed into the anonymous function that's being passed into the Promise constructor that gives the resolve and reject parameter names any functionality?

It seems the strings passed into resolve and reject are passed to then or catch depending on pass or fail condition, but how does Javascript know to link resolve to then and reject to catch? and how does then and catch pass the strings 'Pass' or 'Fail' to the anonymous functions inside them allowing for the strings to be printed to console?

var p = new Promise(function(resolve, reject) {

    let bool = false;

    if (bool) {
        resolve('Pass');
    } else {
        reject('Fail');
    }

});

p.then(function(val) {
    console.log(val);
}).catch(function(val) {
    console.log(val);
});

Sorry if this is a jumbled mess. But I am quite frustrated and confused by the logic that makes up a Promise.

Upvotes: 1

Views: 696

Answers (3)

apple apple
apple apple

Reputation: 10614

Here is a (extremely) simplified example of what happened.

class P{
  constructor(callback){
    callback(v=>this.resvalue=v, v=>this.rejvalue=v)
  }
}

let p = new P((resolve,reject)=>{
  resolve(1);
})

console.log(p)

Upvotes: 0

Jesper
Jesper

Reputation: 206996

Have you ever been to a pizza restaurant, where you order your pizza and then you don't get the pizza immediately, but you get a buzzer device that will warn you when your pizza is ready? That's exactly what a Promise is.

The function that you pass to the constructor of Promise is the cook that is going to prepare the pizza. The cook takes two parameters, which are functions. When the cook has finished the pizza, it will call the resolve function. If something goes wrong and the pizza cannot be finished, it will call the reject function.

Who calls resolve and reject?

The function that you pass to the constructor of Promise (the cook) does. It's right there in your code:

if (bool) {
    resolve('Pass');  // Call the resolve function
} else {
    reject('Fail');   // Call the reject function
}

You supply the actual functions to call by calling then(...) and catch(...) on the Promise object.

p.then(function(val) {    // <= This function is the actual resolve function
    console.log(val);
}).catch(function(val) {  // <= This function is the actual reject function
    console.log(val);
});

It might be easier to understand by using a concrete example like with the cook and pizza than when you use abstract concepts:

function pizzaCook(resolve, reject) {
    let bool = false;

    if (bool) {
        resolve('Pizza is ready!');
    } else {
        reject('Sorry, the oven is broken!');
    }
}

var p = new Promise(pizzaCook);

function letsEat(msg) {
    console.log('Great, I can eat now, the cook said: ' + msg);
}

function stayHungry(msg) {
    console.log('Oh no, I will stay hungry, because: ' + msg);
}

p.then(letsEat).catch(stayHungry);

Upvotes: 1

eja
eja

Reputation: 5329

You can read more on https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/Promise

Also feel free to inspect the Promise class from within any modern IDE.

TLDR; All in all in simple terms, Promise has an internal executor which hooks up your 'Pass' value with the p.then handler, but throws an exception caught by .catch when you invoke reject('Fail').

Upvotes: 1

Related Questions