Non-blocking
The page can keep responding while work is pending.
Platform under construction
Async Introduction
Async JavaScript lets work finish later without freezing the page.
status.textContent = "Loading...";
setTimeout(() => {
status.textContent = "Done";
}, 1000);
Async JavaScript
Async code starts now and completes later.
JavaScript runs on a single main thread in the browser, but many operations do not complete immediately. Timers, network requests, file reads and user interactions all happen over time.
Async programming is the pattern of starting work, letting the browser stay responsive and then reacting when the work completes.
Good async code always answers three questions: what is loading, what happens on success and what happens on failure.
Callback
A function called later.
Promise
An object representing future success or failure.
async/await
Syntax that makes promise-based code read sequentially.
Examples
Async code should show state, handle failure and avoid stale results.
Show pending, success and failure states
status.textContent = "Loading..."; loadData() .then(render) .catch(showError);
Starting async work with no failure path
loadData().then(render); // What happens when loading fails?
Code patterns
Reusable examples for quick reference.
These examples are the async patterns you will reuse: timers, promises, composition, await, fetch and cancellation.
Timer callback
Run code later.
setTimeout(() => {
console.log("later");
}, 500);
Promise then
React when a promise resolves.
loadData().then(data => {
render(data);
});
async function
await pauses inside the async function only.
async function start() {
const data = await loadData();
render(data);
}
Failure path
Async work needs catch or try/catch.
loadData().catch(error => {
showError(error.message);
});
Rules that matter
Make time visible in your code.
Async JavaScript is easier when every operation has clear pending, success, failure and cancellation behavior.
Always model pending state
Users should know something is happening.
Always model failure state
Network and parsing can fail.
Do not block the main thread
Long synchronous work freezes interaction.
Return promises from async helpers
Callers need to know when work finishes.
Keep state transitions explicit
loading, success and error should be visible in code.
Avoid mixing styles randomly
Use either async/await or then chains consistently in a block.
Production thinking
Reliable async code is what makes modern interfaces feel fast instead of fragile.
Why does this matter?
Modern interfaces depend on async work. Without a clear model, loading bugs and race conditions appear quickly.
Accessibility
Loading and error states should be visible text, not only spinners or color changes.
Production note
Production async code should handle timeout, cancellation, retry and user feedback where appropriate.
SEO note
Critical content loaded asynchronously should render reliably and not depend on fragile client-only timing.
Live code lab
Change the HTML, CSS or JavaScript and run the result.
The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.
Mini assignment
Try this now.
- Add a disabled state while loading.
- Add an error state randomly.
- Change the delay and explain what changes.
Practice assignment
Do this before moving to the next topic.
- Create a pending state.
- Complete it later with setTimeout.
- Add a visible result.
Try it yourself
Simulate loading state
Self-check
Before you continue, prove that you understand Async Introduction.
If you can explain when the code runs, how it fails and what happens if it becomes irrelevant, you understand the async model.
- Can you explain async work?
- Can you explain pending state?
- Can you explain callbacks?
- Can you explain promises at a high level?
- Can you explain why failure state matters?