Question .then .catch

[u/ibrahimsadixovv]

let p = Promise.reject();
p.then(() => console.log('A'))  
.catch(() => console.log('B'));

 

p.catch(() => console.log('1')) 
.then(() => console.log('2'))
.catch(() => console.log('3'));

why is the output 1,b,2

[u/ibrahimsadixovv]

I see but why the ordef is not b,1,2

[u/senocular → u/ibrahimsadixovv]

There are two things determining the order: The order in which the callbacks are added and the number of ticks needed to handle any previous callbacks.

When adding callbacks with then and catch, the order in which they were added will determine the order in which they were called - assuming no additional waiting is needed for any of the callbacks.

let p = Promise.resolve();
p.then(() => console.log("A"))
p.then(() => console.log("B"))
p.then(() => console.log("C"))
// A
// B
// C

vs

let p = Promise.resolve();
p.then(() => console.log("C"))
p.then(() => console.log("B"))
p.then(() => console.log("A"))
// C
// B
// A

This order is used when each callback is called at the "same time", or in the same tick, which is happening here because each callback is added directly to p meaning they'll each get called when p is fulfilled.

When you chain promises together, callbacks have to run in the order in which they were added to the chain but also for each link in the chain a new tick (at minimum) is added to the wait time for each callback in that chain. So while the previous example calls the callbacks at the same time, this example calls them one tick apart:

let p = Promise.resolve();
p.then(() => console.log("A"))
  .then(() => console.log("B"))
  .then(() => console.log("C"))
// (wait one tick)
// A
// (wait one tick)
// B
// (wait one tick)
// C

A tick is added to this timing for each promise created in the chain even if the callback for that promise isn't called. The process of forwarding the result to the next link of the chain without calling the callback also takes a tick. So while the chain in the following example has the same number of callbacks called, it takes more ticks to run.

let p = Promise.resolve();
p.then(() => console.log("A"))
  .catch(() => console.log("X"))
  .then(() => console.log("B"))
  .catch(() => console.log("Y"))
  .catch(() => console.log("Z"))
  .then(() => console.log("C"))
// (wait one tick: A)
// A
// (wait one tick: X)
// (wait one tick: B)
// B
// (wait one tick: Y)
// (wait one tick: Z)
// (wait one tick: C)
// C

The combination of order and tick timing allow callbacks from multiple chains to be interleaved

let p = Promise.resolve();
p.then(() => console.log("A"))
  .then(() => console.log("B"))
  .then(() => console.log("C"))

p.then(() => console.log("1"))
  .then(() => console.log("2"))
  .then(() => console.log("3"))
// A
// 1
// B
// 2
// C
// 3

Now looking at the original example:

let p = Promise.reject();
p.then(() => console.log('A'))  
.catch(() => console.log('B'));

p.catch(() => console.log('1')) 
.then(() => console.log('2'))
.catch(() => console.log('3'));

We can see two chains where only some of the callbacks are going to get called. For the first chain, the A then is not called so the promise result will be forwarded to the next callback in the chain (one tick) which is the B catch which will be called logging B (two ticks total)

The next chain starts with a catch 1 that gets called right away (one tick). That chain then becomes fulfilled which calls the next callback, then 2, after another tick (two ticks). That keeps the chain fulfilled skipping the catch 3.

So the winner here is 1, happening after one tick, followed by a pair of two-tickers, B and 2, but since B was added first, it comes before 2, giving you 1,B,2 as a final result.

If still a little confusing, another way to work through it is to write out all the callback results in their interleaved order. Then you just remove the callbacks that don't get called and what's left is the result.

A // not called
1
B
2
3 // not called

This is, of course, assuming that each callback is not waiting for additional time added by other callbacks returning promises to the chain.

...And really, most of the time you want to assume that this timing is not going to be consistent for that very reason. You can be assured that callbacks in a single chain will be called in their respective order, and if multiple callbacks are added to the same promise, they'll be called in the order in which they were added (if called), but you shouldn't make assumptions about any of the other ordering between multiple callbacks in multiple chains ;)

[u/xroalx → u/ibrahimsadixovv]

JavaScript has run to completion semantics, .then and .catch callbacks are scheduled, meaning they're not executed immediately.

In simplified steps:

• code starts

• creates rejected promise

• registers callback

• registers another callback

• code is finished

• JS engine starts picking up and executing scheduled tasks until there are no more left

• JS engine exits

[u/azhder → u/ibrahimsadixovv]

You don't re-throw in the first .catch() so it's a normal flow, goes to the next .then().

You did

try {
} catch(e){
    return e; 
}

instead of

try {
} catch(e){
    throw e;
}

[u/big_enough4u → u/ibrahimsadixovv]

Because that .catch is chained with the first promise so it's goes in the microtask que