Creating Promises, Chaining, Error Handling & async/await — Flow Diagram — JavaScript

await — what the call stack actually does

flowchart TD
    A["<b>i · handle() pushed</b><br/>call stack runs sync code"]
      --> B["<b>ii · logs 'Hi'</b><br/>synchronous"]
    B --> C["<b>iii · hits `await p`</b>"]
    C --> D["<b>iv · handle() SUSPENDED</b><br/>popped off the call stack"]
    D --> E["<b>v · stack is free</b><br/>other code runs — UI, events, timers"]
    E --> F["<b>vi · p settles</b><br/>resolve(value) or reject(error)"]
    F --> G["<b>vii · microtask scheduled</b><br/>resume handle()"]
    G --> H["<b>viii · handle() pushed back</b><br/>resumes after the await"]
    H --> I["continues line by line<br/>until next await or return"]
 
    classDef head   fill:#f5efe1,stroke:#6a8a4f,stroke-width:2px,color:#1a1915;
    classDef sync   fill:#fdecd3,stroke:#c2410c,stroke-width:2px,color:#1a1915;
    classDef pause  fill:#e3e8f5,stroke:#4a5a8a,stroke-width:2px,color:#1a1915;
    classDef resume fill:#e7efd9,stroke:#587640,stroke-width:2px,color:#1a1915;
    class A head
    class B,C sync
    class D,E,F,G pause
    class H,I resume

handle() pushed

The async function is called; its frame goes onto the call stack just like any function.
logs 'Hi'

The synchronous part of the function runs normally until the first await.
Hits `await p`

Engine sees await — it will not block. It prepares to suspend the function.
Function SUSPENDED

The frame is popped off the stack. The function is paused mid-execution, state preserved.
Stack is free

Other synchronous code, timers, event handlers, and microtasks run without blocking.
p settles

The awaited promise resolves or rejects — settlement is permanent and one-shot.
Microtask scheduled

The engine queues a microtask to resume the suspended function with the settled value.
handle() resumes

The frame is pushed back onto the stack. Execution continues after the await with the value.

await — what the call stack actually does

Comments