MAKING SENSE OF ASYNC

Async, await & promises.

Watch asynchronous tasks work together. Two hands-on experiments in waiting for a batch to finish and retrying the tasks that fail.

EXPERIMENT 01

All together with Promise.all()

Run timers, fetch requests, and image loads concurrently. The counters track completed tasks, and the timer stops once the whole batch succeeds.

  • ⏳ Number of random timeouts: 0
  • 🔄 Number of HTTP fetch requests: 0
  • 🖼️ Number of image loads: 0

⏰ Total Time taken:

Watch the completed tasks update as the simulation runs.

EXPERIMENT 02

Retry with Promise.allSettled()

A simulated image pipeline crops, inserts a database record, uploads, and marks the job complete. Failed tasks are retried using the results from Promise.allSettled(). The deliberately high 99.5% failure rate makes those retries visible.

Fail Rate: 99.5%

Crop Runner Count: 0, Inserting: --, Upload Runner Count: 0, Completing: --
{
  "crops": {
    "frame_1": {
      "32px": false,
      "128px": false,
      "400px": false,
      "color1x1": false
    },
    "frame_2": {
      "32px": false,
      "128px": false,
      "400px": false
    },
    "frame_3": {
      "32px": false,
      "128px": false,
      "400px": false
    },
    "frame_4": {
      "32px": false,
      "128px": false,
      "400px": false
    },
    "frame_5": {
      "32px": false,
      "128px": false,
      "400px": false
    }
  },
  "insert": false,
  "uploads": {
    "frame_1": {
      "32px": false,
      "128px": false,
      "400px": false,
      "original": false
    },
    "frame_2": {
      "32px": false,
      "128px": false,
      "400px": false
    },
    "frame_3": {
      "32px": false,
      "128px": false,
      "400px": false
    },
    "frame_4": {
      "32px": false,
      "128px": false,
      "400px": false
    },
    "frame_5": {
      "32px": false,
      "128px": false,
      "400px": false
    }
  },
  "complete": false
}
Watch the completed tasks update as the simulation runs.