Event Loop and Source Panels

Async Await Steps

Use await to pause and resume a small calculation.

async-await `await` pauses the async function until the Promise value is ready, then execution resumes inside the same source.

Async Await Steps

fetched
async_await_steps.js
Replay: real traced execution (multi-file project)
const fetched = 8;
let prepared = 0;
let score = 0;

async function calculate(value) {
  prepared = value + 1;
  const remote = await Promise.resolve(prepared + 9);
  score = remote;
  console.log("fetched=" + fetched);
  console.log("prepared=" + prepared);
  console.log("score=" + score);
}

calculate(fetched);

const fetched = 4;
let prepared = 0;
let score = 0;

async function calculate(value) {
  prepared = value + 1;
  const remote = await Promise.resolve(prepared + 9);
  score = remote;
  console.log("fetched=" + fetched);
  console.log("prepared=" + prepared);
  console.log("score=" + score);
}

calculate(fetched);

const fetched = 12;
let prepared = 0;
let score = 0;

async function calculate(value) {
  prepared = value + 1;
  const remote = await Promise.resolve(prepared + 9);
  score = remote;
  console.log("fetched=" + fetched);
  console.log("prepared=" + prepared);
  console.log("score=" + score);
}

calculate(fetched);

  1. fetched ← 8, prepared ← 0, score ← 0

    1const fetched→ 8 = 8; //@fetched=4, 122let prepared→ 0 = 0;3let score→ 0 = 0;45async function calculate(value) {6  prepared = value + 1;7  const remote = await Promise.resolve(prepared + 9);8  score = remote;9  console.log("fetched=" + fetched);10  console.log("prepared=" + prepared);11  console.log("score=" + score);12}1314calculate(fetched8);

  2. prepared ← 9, value ← 8

    2let prepared = 0;3let score = 0;45async function calculate(value8) {6  prepared = value→ 8 + 1;7  const remote = await Promise.resolve(prepared + 9);8  score = remote;
    values this step9prepared

  3. remote ← 18, prepared ← 9, score ← 18

    5async function calculate(value) {6  prepared = value + 1;7  const remote→ 18 = await Promise.resolve(prepared→ 9 + 9);8  score = remote18;9  console.log("fetched=" + fetched8);10  console.log("prepared=" + prepared9);11  console.log("score=" + score18);12}1314calculate(fetched8);
    outputfetched=8
prepared=9
score=18

  1. fetched ← 4, prepared ← 0, score ← 0

    1const fetched→ 4 = 4;2let prepared→ 0 = 0;3let score→ 0 = 0;45async function calculate(value) {6  prepared = value + 1;7  const remote = await Promise.resolve(prepared + 9);8  score = remote;9  console.log("fetched=" + fetched);10  console.log("prepared=" + prepared);11  console.log("score=" + score);12}1314calculate(fetched4);

  2. prepared ← 5, value ← 4

    2let prepared = 0;3let score = 0;45async function calculate(value4) {6  prepared = value→ 4 + 1;7  const remote = await Promise.resolve(prepared + 9);8  score = remote;
    values this step5prepared

  3. remote ← 14, prepared ← 5, score ← 14

    5async function calculate(value) {6  prepared = value + 1;7  const remote→ 14 = await Promise.resolve(prepared→ 5 + 9);8  score = remote14;9  console.log("fetched=" + fetched4);10  console.log("prepared=" + prepared5);11  console.log("score=" + score14);12}1314calculate(fetched4);
    outputfetched=4
prepared=5
score=14

  1. fetched ← 12, prepared ← 0, score ← 0

    1const fetched→ 12 = 12;2let prepared→ 0 = 0;3let score→ 0 = 0;45async function calculate(value) {6  prepared = value + 1;7  const remote = await Promise.resolve(prepared + 9);8  score = remote;9  console.log("fetched=" + fetched);10  console.log("prepared=" + prepared);11  console.log("score=" + score);12}1314calculate(fetched12);

  2. prepared ← 13, value ← 12

    2let prepared = 0;3let score = 0;45async function calculate(value12) {6  prepared = value→ 12 + 1;7  const remote = await Promise.resolve(prepared + 9);8  score = remote;
    values this step13prepared

  3. remote ← 22, prepared ← 13, score ← 22

    5async function calculate(value) {6  prepared = value + 1;7  const remote→ 22 = await Promise.resolve(prepared→ 13 + 9);8  score = remote22;9  console.log("fetched=" + fetched12);10  console.log("prepared=" + prepared13);11  console.log("score=" + score22);12}1314calculate(fetched12);
    outputfetched=12
prepared=13
score=22