Live Instruction · JavaScript · Async · Masterschool
JavaScript Async —
Promises, .then/.catch, and Promise.all
A live open gym session working through JavaScript async patterns — promise states, executor functions, handling success and failure with .then and .catch, and running concurrent promises with Promise.all, with real-time student Q&A and live code built around an inventory and clothing order system.
The Session
Review before React
This session landed at a transitional moment in the cohort — the UdaciRacer project was due the next day, a review week was coming, and React was on the horizon. Most students were heads-down on the project, which left a small group for the open gym. That made for a more conversational session, with students answering questions live rather than just watching.
The session opened with a Q&A on promise fundamentals — students defined promises, named the three states, and explained async/await syntax before anything was built. That grounding exercise confirmed what was solid and surfaced the pieces that needed more context before moving into code.
From there the session built through three async patterns in sequence: writing an executor function, chaining .then and .catch handlers, and running multiple concurrent promises with Promise.all. async/await was on deck as a follow-up but ran out of time — students were pointed to the exercises to try on their own.
3
async patterns covered
Masterschool Coding Bootcamp
JavaScript · Promises · Async/Await · Udacity Curriculum
International cohort · Open gym format
The Content
What the session covered
Promise fundamentals through Promise.all — built live with student answers driving the pace at each step.
Promise States
Opened with a Q&A: students defined promises as objects representing the eventual outcome of an async operation, and named all three states — pending (waiting), fulfilled (resolved value received), and rejected (failed with a reason). Added the term "settled" for any promise no longer pending.
async/await Concept
Students explained async/await as syntax that lets you write async code in a synchronous-looking style — the function waits for a promise to resolve before continuing. Confirmed that await can only be used inside an async function and connected it to why promise chaining existed before this syntax.
Executor Function
Built an executor function that takes resolve and reject as parameters, checks if inventory.shirt is greater than zero, and calls the appropriate handler with a string message. Showed how the executor gets passed into the Promise constructor and drives the promise outcome.
orderShirt Function
Wrapped the executor in a function that returns new Promise(executor) — demonstrating how to encapsulate promise creation in a callable function. Logged the promise object directly to show the state and result properties updating from pending to fulfilled.
handleSuccess and handleFailure
Built two separate handler functions — handleSuccess logs the resolved value, handleFailure logs the rejection reason. Separated them to make the .then/.catch pattern explicit before chaining them into the promise, keeping the logic readable and reusable.
.then/.catch Chaining
Chained checkInventory(order).then(handleSuccess).catch(handleFailure) — demonstrating how the resolved value flows into the then callback and how a rejection is caught without crashing. Showed the unhandled promise rejection error that appears when catch is missing.
setTimeout as Async Simulation
Explained why the provided checkInventory function wraps its logic in setTimeout — to simulate a real async operation like a server request where the response time is unknown. Connected this to the reason JavaScript is non-blocking: synchronous code runs fully before async callbacks fire.
.every() Array Method
Introduced .every() in the context of checking whether all items in an order array are in stock. Explained that every element must pass the condition for it to return true, and contrasted it with .some(), where only one element needs to pass.
Promise.all
Covered Promise.all as the pattern for running multiple async operations concurrently — passing an array of promises and handling all results at once. Used a real-world example: loading a page from multiple sources (header, sidebar, footer) without waiting for each one to finish before starting the next.
The Approach
Q&A first, then build in sequence
Starting with student definitions rather than a lecture slides the session into a different mode — it becomes a conversation about what students already know rather than content delivery. When a student explains pending as "before the promise gives back the rejection or fulfillment," that's a correct answer that came from their own understanding. Building on that is more durable than overwriting it with a definition.
The inventory and clothing order system was a good vehicle for this content because it maps naturally onto the real-world shape of async code: you make a request (order a shirt), you don't know immediately whether it'll succeed (is it in stock?), and you handle both outcomes. Students could follow the logic without needing to understand the domain deeply.
Showing the unhandled promise rejection error before introducing catch was deliberate. Seeing the error message — and understanding that it appears specifically because there's no catch — gives students a reason to care about error handling rather than just adding it because the pattern requires it.
Promise.all closed the session with the concept that matters most in production: running multiple async operations concurrently instead of waiting on each one sequentially. The page loading example — header, sidebar, footer arriving from different servers — gave students a concrete picture of why this pattern exists.
Define the Concepts
Promises · states · async/await · student Q&A
Build the Executor
resolve/reject · inventory check · Promise constructor
Add Handlers
handleSuccess · handleFailure · log resolved/rejected value
Chain It
.then · .catch · unhandled rejection error demo
Scale Up
Promise.all · concurrent promises · random outcomes
Session Recording
Watch the Session
Live open gym covering promise states, executor functions, .then/.catch chaining, and Promise.all.
Reflection
Show the error before the fix
The unhandled promise rejection error is one of the more useful things you can show in a session on promises — it appears specifically because something is missing, and it tells you exactly what. Triggering it on purpose, before adding the catch block, gives students a real error to recognize rather than an abstract warning about always handling rejections.
Promise.all is where async programming starts to feel powerful rather than just complicated. The page loading example worked because students could picture it — every web page they've seen loads multiple pieces from multiple places, and now they have a mental model for how that works without each piece blocking the next.
3
states · patterns · real-world uses
Pending · Fulfilled · Rejected
Executor · .then/.catch · Promise.all
Server requests · page loading · concurrent ops
Interested in working together?
I'm open to remote opportunities in technical learning experience design, developer education, and customer enablement.