Skip to content

README.md

Latest commit

 

History

History
45 lines (30 loc) · 3.19 KB

README.md

File metadata and controls

45 lines (30 loc) · 3.19 KB
Raw

Mentors demo – Promises & async/await

In-session live coding for Week 3 (Advanced JavaScript). The demo walks through fetch with JSONPlaceholder, async/await, consuming promises with .then() / .catch(), creating promises with new Promise, try / catch with async code, Promise.all, and an optional promise microtask loop. You implement the worksheet during class; the solution file is the finished version.

Files in this folder

File Purpose
index.js Worksheet: section banners, // Task: lines, and // Next: hints. Only getUser and promiseLoop are declared; you add the rest while teaching. Use this file when leading the session.
index-solution.js Full implementation: showOutput, getUser, promise consumption, timed and pizza promises, try / catch fetch, Promise.all, and promiseLoop.
index.html Minimal page that loads index.js. Add markup (e.g. <pre id="out">) when you want on-page output; the solution’s showOutput writes to #out.
style.css Basic layout and styles for #out (and main if you use it).

Where to find tasks and how they are marked

Everything lives in index.js. Search for // ========== for section breaks, // Task: for what to build, and // Next: for suggested links to the trainee exercises.

How the code works

URLs (JSONPlaceholder)

  • USER_URL – https://jsonplaceholder.typicode.com/users/1
  • POST_URL – https://jsonplaceholder.typicode.com/posts/1
  • TODO_URL – https://jsonplaceholder.typicode.com/todos/1 (optional extra)

Solution-only helpers and functions

  • showOutput(text) – Sets textContent on #out when that element exists.
  • getUser() – async fetch of USER_URL, then .json(), then showOutput with stringified user data.
  • loadOneResourceWithThen() – Same resource with .then / .catch only (no async/await).
  • oneSecondMessage() – Promise that resolves after one second, then shows "It worked".
  • demoOrderPizza() – Delayed resolve or reject, then shows pizza or error text.
  • getUserWithTryCatch() – Same fetch pattern as getUser with try / catch and errors on the page.
  • demoPromiseAll() – Fetches USER_URL and POST_URL in parallel, then shows a short two-line summary.
  • promiseLoop() – Schedules endless microtasks (illustration only; can freeze the tab if called).

Callback hell

Not implemented in these files; use the session plan (e.g. npm q or your own example on the board).