async function
Always returns a promise.
Platform under construction
async & await
async and await make promise-based code read like a sequence while still remaining asynchronous.
async function load() {
const data = await loadData();
render(data);
}
Async JavaScript
await pauses the async function, not the whole page.
An async function always returns a promise. Returning a value fulfills that promise. Throwing an error rejects it.
await waits for a promise to settle before continuing inside the async function.
Use try/catch around awaited work when you need to handle rejection locally.
await
Waits for a promise inside async code.
try/catch
Handles awaited rejections.
return value
Becomes the fulfilled value of the async function.
Examples
Async code should show state, handle failure and avoid stale results.
Use try/catch around awaited work
async function start() {
try {
const data = await loadData();
render(data);
} catch (error) {
showError(error.message);
}
}
Awaiting without handling rejection
async function start() {
const data = await loadData();
render(data);
}
Code patterns
Reusable examples for quick reference.
These examples are the async patterns you will reuse: timers, promises, composition, await, fetch and cancellation.
Await one value
Readable sequential flow.
const data = await loadData();
Handle failure
try/catch catches awaited rejection.
try {
const data = await loadData();
} catch (error) {
showError(error.message);
}
Return from async
Return value fulfills the promise.
async function getTitle() {
return "Dashboard";
}
Parallel awaits
Start promises before awaiting both.
const profilePromise = loadProfile(); const settingsPromise = loadSettings(); const profile = await profilePromise; const settings = await settingsPromise;
Rules that matter
Make time visible in your code.
Async JavaScript is easier when every operation has clear pending, success, failure and cancellation behavior.
Remember async returns a promise
Callers still need await or then.
Use try/catch for local failures
Awaited rejections behave like thrown errors.
Do not serialize independent work accidentally
Start independent promises before awaiting.
Keep loading state in finally
It should clear after success or failure.
Avoid top-level await unless supported
It is available in modules, not classic scripts.
Return useful values
Async helpers should resolve to something callers need.
Production thinking
Reliable async code is what makes modern interfaces feel fast instead of fragile.
Why does this matter?
async/await is the most readable way to write many modern async workflows, but the promise model still matters.
Accessibility
Awaited UI updates should still show pending and error text.
Production note
Production async/await code needs cancellation, error reporting and consistent state cleanup.
SEO note
Awaited rendering failures should not leave critical content missing without fallback.
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.
- Make wait reject and catch the error.
- Move cleanup into finally.
- Start two waits at the same time with Promise.all.
Practice assignment
Do this before moving to the next topic.
- Write one async function.
- Await one promise.
- Handle failure with try/catch.
Try it yourself
Use async and await
Self-check
Before you continue, prove that you understand async & await.
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 functions?
- Can you explain await?
- Can you explain try/catch around await?
- Can you explain accidental serialization?
- Can you explain why async still returns a promise?
Senior audit upgrade
Extra production context for async & await.
async/await model
await pauses inside the async function, not the whole browser. That keeps the interface responsive.
async function starts -> await promise -> function pauses -> browser keeps working -> function resumes with value or throws