订购 JavaScript 承诺

Question

I have stumbled on the example of code related to Promises in JavaScript and can't understand why will it type ABC instead of CAB. Here is the code:

p.then(function() {
  p.then(function() {
    console.log("C");
  });
  console.log("A");
});
p.then(function() {
  console.log("B");
}); //  A   B   C

I may be mistaking that it isn't important for my question what code is in p.

Answer 1

The .then() method of class Promise() sets some code (a function) to be executed at some moment in the future, when the promise is resolved.

A Promise is what its name says: the promise of a result that will be available at some time in the future, when an operation that has already started and runs asynchronously completes. The code that started the asynchronous operation (and created the promise) can continue doing what it has to do without waiting for the async operation to complete.

Each invocation of .then() adds a function to a queue of functions to be executed when the promise is resolved (ie when the asynchronous operation completes with success). Each promise has its own queue.

The top-level code you posted calls p.then() twice. After it executes, the queue of p contains the following functions waiting to be executed:

function() {
  p.then(function() {
    console.log("C");
  });
  console.log("A");
}

function() {
  console.log("B");
}

When p is resolved it calls these two functions, in order.
The first function puts a call to another function at the end of the queue (by calling p.then() ) then it prints A . When it ends, the queue contains the following functions, waiting to be called:

function() {
  console.log("B");
}

function() {
  console.log("C");
}

The function that displays A has been removed from the queue because it has been executed.

Then these functions are executed in the order they were placed on the queue and, of course, they print B and C (in this order). Each of them is removed from the queue after it is executed.

Answer 2

The callbacks you are passing to then are always called asynchronously:

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

This is the expected behaviour for asynchronous code, when p fulfills after a timeout or so, and promises do not deviate from that behaviour even if p is an already-fulfilled promise.

Other than that, callbacks attached to a promise will just be scheduled in the same order as the respective then calls happened, so A will always log before B .

Answer 3

Assuming p is a resolving promise

const p = Promise.resolve();

Then calling p.then(f1) would issue f1 for execution once the JS thread is available (remember: js is executed in a single thread!) .

Next, p.then(f2) would enqueue f2 for execution.

Once the end of the file is reached the queue is executed. f1() first enques another function f3 using the promise and then prints A . Next, f2 is in the queue, printing B . Then the last f3 is executed to print C .

You can maybe better understand it when adding more tracing:

const p = Promise.resolve();

console.log('1');
p.then(function() {
  console.log('2');
  p.then(function() {
    console.log('3');
    console.log("C");
  });
  console.log('4');
  console.log("A");
});
console.log('5');
p.then(function() {
  console.log('6');
  console.log("B");
}); //  A   B   C
console.log('7');

prints (I added | marks to hint where a different function runs):

1 5 7 | 2 4 A | 6 B | 3 C 
main  | f1    | f2  | f3

Answer 4

Why does it go in this order? Promises are asynchronous. The code does not sit and wait for the them to be executed, it just stores it and continues on.

You register two thens (A and B). The promise is done, they are executed. The first one runs (A), it registers another then (C). The second on runs (B), and then the third one runs (C).

 var p = new Promise(resolve => window.setTimeout(resolve, 500)) console.log('registering A') p.then(function() { console.log('registering C') p.then(function() { console.log("C"); }); console.log("A"); }); console.log('registering B') p.then(function() { console.log("B"); });

Answer 5

let's break this down, line by line

// .then triggers the 1st stack call and jumps to the next line of sync code
p.then(function() {
  // triggers the 3rd stack call 
  p.then(function() {
    // prints "C" from 3rd stack call
    console.log("C");
  });
  // prints "A" from 1st stack call
  console.log("A");
});
// jumps to this line of sync code, then triggers the 2nd stack call 
p.then(function() {
  // prints "B" from 2nd stack call
  console.log("B");
}); //  A   B   C

what @Bergi says is right about async calls being placed in the call stack -- meaning the js engine will push forward with what synchronous code is left to execute then circle back to the call stack.

In your example, when the 1st async p.then is called, it jumps to the next synchronous line of code which happens to triggers the 2nd stack call. when there is no synchronous code left, the js engine looks for 1st stack call in the stack. it sees p.then which triggers the 3rd stack call and moves to the next of sync code console.log("A"); . at this point no sync code is left, so the engine goes to the call stack again and executes the next stack call it sees and console.log("B"); and again with no sync code left, it reaches into the call stack and sees the 3rd stack call and executes console.log("C")

Answer 6

To explain better I will tag all your three promises.

p.then(function() {
  p.then(function() {
    console.log("C");
  }); // Z
  console.log("A");
}); // X

p.then(function() {
  console.log("B");
}); // Y

First you should know promises are handled asynchronously.They either get resolved or rejected. In your case they will be resolved immediately and pushed to a queue called callback queue where they will be picked and executed when callstack is empty.

So, when your code runs it registers first two, X and Y . It pushes them in the callback queue , which is based on FIFO , whatever is pushed first gets executed first.

So X start executing, but in X you have another promise Z so it also get registered, and pushed back to Y in the queue. After it, A gets printed.

Now your second promise Y gets executed and B gets printed, and finally Z gets executed and C gets printed.