Open code, practice, and notes →
Download source with English comments · for reading
JavaScript · 13 Promises and Execution Order
Series contents · Technology map
Stage: DOM and asynchronous operations · Editable example · Storage ID: javascript-step-13
Goals and learning outcomes
- Record the actual order of the three types of logs.
- A reject is handled once in the final catch.
Prerequisites
The work and experiment records from Unit 12, “Event Propagation and Delegation”
Key concepts and explanations
Microtasks
Promise reaction callbacks are processed after synchronous code finishes. Their execution order is determined in a different queue from timer callbacks.
Returning from a Chain
If you return a Promise from then, the next step waits for its result. Omitting the return separates the inner work from the following step.
Practice setup
First check the execution scope guidance on the example screen. The following environment is for extending the assignment in a separate project. Implement it yourself in a separate local project and check it with browser developer tools. In a separate folder, connect your practice JS from index.html using script type="module" and open it through a local HTTP server. Use the Console, Network, and Elements panels.
The linked example is a starting point. It does not implement every task below. Complete work beyond its supported scope in a separate project.
Practice tasks
- In order.js, prepare two delayed operations and one reject.
- Place synchronous, then, and setTimeout logs, and compare returning versus omitting a return and how reject propagates.
- Run with two delayed operations and one reject. Results to check: Record the actual order of the three types of logs. A reject is handled once in the final catch. Record expected and actual results separately.
Variables to observe
| Variable | Baseline | Change | Expected change / hypothesis |
|---|---|---|---|
| Return from then | Return a Promise | Omit the return | Hypothesis before running: The following step may proceed before the inner work. Keep the other conditions fixed and record the actual result separately after running. |
Predictions in this table are not measured results. Change one condition at a time and record why the actual result differs.
Completion criteria
- Record the actual order of the three types of logs.
- A reject is handled once in the final catch.
Self-check
- Does await stop the thread?
- Where does a failure go if the Promise was not returned?
Official references
Linked example and execution scope
Example source · Runtime environments and limits
Compare the editable inputs with actual browser execution results.
Source code and records are not overwritten automatically. Resetting an existing example also preserves your notes.
Next learning
Previous: Event Propagation and Delegation · Next: Asynchrony and Cancellation