What is the Execution Order of Promise Handlers in JavaScript?

Understanding Promise Execution Order

In JavaScript, promises are used to handle asynchronous operations. The execution order of promise handlers can be confusing, especially when there are nested promises.

Line-by-Line Analysis of the Code

Let's analyze the provided code line by line to understand the execution order:

1. Promise.resolve('A')
  .then(function(a){console.log(2, a); return 'B';})
  .then(function(a){
    Promise.resolve('C')
      .then(function(a){console.log(7, a);})
      .then(function(a){console.log(8, a);});
    console.log(3, a);
    return 'B';})
  .then(function(a){
    Promise.resolve('D')
      .then(function(a){console.log(9, a);})
      .then(function(a){console.log(10, a);});
    console.log(4, a);})
  .then(function(a){
    console.log(5, a);});

• Line 1: Creates a promise that resolves immediately to 'A' and attaches a .then() handler to it.
• Line 2: Console logs '2' when the promise resolves with 'A' and returns 'B'.
• Line 5: Another .then() handler is added to the promise created in Line 1.
• Line 6-8: Creates a new promise that resolves to 'C' and attaches two .then() handlers that console log '7' and '8' respectively.
• Line 10: Console logs '3' and returns 'B'.
• Line 12-14: Another .then() handler is added to the promise created in Line 5.
• Line 15-17: Creates a new promise that resolves to 'D' and attaches two .then() handlers that console log '9' and '10' respectively.
• Line 19: Console logs '4'.
• Line 22-24: Another .then() handler is added to the promise created in Line 12.
• Line 27: Console logs '5' when the promise resolves.

Execution Order

1. Line 1: Promise resolved, console logs "2 A"
2. Line 10: Console logs "3 B"
3. Line 19: Console logs "4 B"
4. Line 27: Console logs "5 undefined"
5. Line 7: Console logs "7 C"
6. Line 8: Console logs "8 undefined"
7. Line 15: Console logs "9 D"
8. Line 17: Console logs "10 undefined"
9. Line 30: Console logs "1"
10. Line 33: Console logs "6"

Discussion

• Promise handlers are scheduled asynchronously, so they execute after the current thread of execution completes.
• Nested promises create independent promise chains that do not have a predetermined execution order.
• The order of execution of promises depends on the implementation of the promise engine. In this case, the engine used schedules micro-tasks (promise handlers) before macro-tasks (setTimeout()).
• Relying on a specific execution order for nested promises is not recommended. Instead, chain promises explicitly to control their execution order.

The above is the detailed content of What is the Execution Order of Promise Handlers in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!