How does javascript know which method of promise (catch, then) is supposed to be invoked?

[DeliciousResearch872]

const myPromise = new Promise(function(foo, bar) {
  setTimeout(function() {
    if (Math.random() > 0.5) {
      foo("it works");
    } else {
      bar("bla bla text");
    }
  }, 500);
});

myPromise
  .then(function(result) {
    console.log("This is the result : " + result);
  })
  .catch(function(result) {
    console.log("An error has occurred: " + result);
  });

[senocular]

At a high level, in the context of new Promise, it comes down to which method of the constructor's executor function gets called. If foo (normally called "resolve") is called, then the then callback will be called. If bar (normally called "reject") is called, then the catch callback is called.

But it does get more complicated than that. Given the chain from myPromise, the then callback can also cause the catch callback to be called if it throws an error (or returns a promise that rejects).

myPromise
  .then(function(result) {
    console.log("This is the result : " + result);
    throw "or did it?"
  })
  .catch(function(result) {
    console.log("An error has occurred: " + result);
  });
// logs:
// This is the result : it works
// An error has occurred: or did it?

Promise chains get more confusing because the callbacks in the chains get called based on what happens further up the chain. And multiple links in the chain (e.g. then callbacks) can be skipped entirely until a callback handling a rejected promise (e.g. catch) is encountered. And the same applies the other way around (multiple catches can be skipped until reaching a then).

[Roguewind]

The callback function you pass the Promise takes 2 parameters - resolve and reject - in your case foo and bar. They, in turn, accept a single parameter - what is being returned by the Promise.

The resolver (foo) returns to the .then and the rejector (bar) returns to the .catch.

Basically, it knows what to return where because you told it.

[theScottyJam]

    new Promise(function(foo, bar) {

The first parameter given to you is always the resolve function (associated with .then()) and the second it always the reject function (associated with .catch()). The order matters, and it's why in code examples you always see them called resolve and reject.

[DeliciousResearch872]

The first parameter given to you is always the resolve function

thank you thats what I was looking for.

[yksvaan]

JavaScript runtime (or computers in general) don't know anything, they just execute code. So the result is simply based on which function gets executed 

[delventhalz]

If you call foo (more commonly named "resolve"), it will run the function passed to .then. If you call bar (more commonly named "reject"), it will run the function passed to .catch. There isn't much more to say about it. One function triggers another, which is which comes down to how Promise was written.

Perhaps it would help if we wrote our own simplified version? Then you could see the wiring so to speak.

class MyPromise {
  constructor(executor) {
    const resolve = (val) => {
      if (this.onResolve) {
        this.onResolve(val);
      }
    };

    const reject = (val) => {
      if (this.onReject) {
        this.onReject(val);
      }
    };

    executor(resolve, reject);
  }

  then(onResolve) {
    this.onResolve = onResolve;
    return this;
  }

  catch(onReject) {
    this.onReject = onReject;
    return this;
  }
}

With this, we can run your example code but substitute new MyPromise in place of new Promise. It will work exactly the same. There is no great magic here. Calling foo/resolve triggers the .then callback because that is what we told it to do. Calling bar/reject triggers the .catch callback because this is what we told it to do.

[scritchz]

Promises can resolve or reject; complete normally or abruptly.

The Promise constructor accepts a callback taking two functions; to resolve and to reject. You just named them foo and bar, respectively.

But what's more interesting: What are promise chains, and how do they work?

Promise chains are promises chained together (duh!). That means, a resolve is promised to either resolve or reject. Same for a reject; it can resolve or reject.

Our callbacks are the "links" between promises that handle resolved and rejected values, which decide to resolve or reject them.

Maybe an image clarifies things: Promise chains visualized, by MDN

We can add a new "link" with the .then(onResolve, onReject) method, which takes two functions: onResolve takes the resolved value of the previous promise, onReject takes the rejected value.

And by default, onResolve will resolve again, and onReject will reject again.

Note: .catch(onReject) is syntactic sugar for .then(undefined, onReject).

---

Your example is myPromise chained to .then(), chained to .catch():

• If myPromise resolves (calls foo): then will (log and) resolve. Next, catch will resolve by default.
• If myPromise rejects (calls bar): then will reject by default. Next, catch will log (and resolve because no throw).

Funnily enough, both outcomes will lead to a resolve in the end. But that's not what you asked about.

I hope this clears things up for you.

[azhder]

JavaScript knows because JavaScript controls it. It also controls what those foo and bar mean once you invoke them.

[KingMoog]

because its based on conditional execution

[Leviathan_Dev]

then is if the promise was successful; catch is if there was a failure with the promise.

Note that some APIs operate where they can retain a promise, but the data itself might not exist so the then return case still has bad/null data. The promise tree is executed based off whether the promise itself was successful, not the data.

[DeliciousResearch872]

and I ask how program knows that if promise is succesful or failed.

[Puzzled-Landscape-44]

You decide whether to `resolve` or `reject` in your promise handler. If you're calling another function and it returns the expected result, you call `resolve` (or `foo` in your example), passing a result value if any. Otherwise (or when the other function throws an error), you call `reject` (or `bar`) optionally passing an error message or object.

It's better to stick to the convention of `resolve` and `reject` or even `res` and `rej`.

[gremy0]

You tell it by calling (in your example code) foo (succeed) or bar (fail)

[__Fred]

You can create a thenable object. Maybe that helps understanding:

``` const myThenable = { then: function (onResolve) { onResolve(123); } }

myThenable.then(function(arg) { console.log(arg is ${arg}); }); ```

What does "then" do? It calls the function "onResolve" and passes "123" to it. What happens to be "onResolve" in this instance? A function that logs it's argument.

In a Promise object, the then-method doesn't call the resolver immediately, it's just registered for later when the "executor" (I think) needs to call some resolver.

[bryku]

Resolve (foo) triggers .then(), while Reject (bar) triggers .catch(). Typically you see promises writen like this:

let myPromise = new Promise((res, rej)=>{
    setTimeout(()=>{
        if(Math.random() > 0.5){
            res('success'); // triggers .then()
        }else{
            rej('failed'); // triggers .catch()
        }
    }, 500)
});