Learning overview
- Estimated time
- 4 minutes
- Difficulty
- Beginner
- Prerequisites
- No prior experience required
- Learning outcome
- Explain javascript using a clear mental model · Apply javascript in practical JavaScript work
- Last updated
- July 18, 2026
Start with the promise model
An async function always returns a promise. Await pauses that function until the awaited promise settles; it does not block the entire JavaScript runtime. Rejection behaves like a thrown error at the await expression.
async function loadCourse(slug, signal) {
const response = await fetch(`/api/courses/${encodeURIComponent(slug)}`, { signal });
if (!response.ok) {
throw new Error(`Request failed with ${response.status}`);
}
return response.json();
}Handle errors and cancellation separately
Fetch rejects for network failures and cancellation, but ordinary HTTP errors still produce responses. Check response.ok. Abort obsolete requests and avoid presenting an intentional abort as a user-facing failure.
const controller = new AbortController();
try {
renderLoading();
const course = await loadCourse("javascript", controller.signal);
renderCourse(course);
} catch (error) {
if (error.name !== "AbortError") renderError("Could not load the course.");
} finally {
renderNotLoading();
}Choose sequential or concurrent execution
Await independent requests together with Promise.all so their latency overlaps. Keep sequential awaits when one operation depends on the previous result or when ordering is a requirement.
const [course, progress] = await Promise.all([
fetchCourse(courseId),
fetchProgress(courseId),
]);
renderDashboard({ course, progress });Model every visible state
A production interface needs idle, loading, success, empty, failure, and often stale or retrying states. Disable duplicate submissions only when appropriate and keep status updates accessible to assistive technologies.
Frequently asked questions
Does await block JavaScript?
It suspends the current async function and schedules its continuation. Other queued work can run while the awaited promise is pending.
When should I use Promise.all?
Use it for independent promises that may run concurrently and should fail as one operation. Use allSettled when every outcome must be collected.
Why does fetch not reject for a 404 response?
Fetch fulfilled its network operation and returns a Response. Your code must inspect response.ok or status and decide whether the HTTP result is acceptable.
Topic graph
A taxonomy-generated path through this subject.
Related courses
Related learning
Recommended automatically from shared technologies, topics, intent, and difficulty.
Related Guides
Related Tutorials
Related Glossary
Related Cheatsheets
Related Projects
Related Interview Questions
Related reading
Hand-picked companion pages that deepen this topic.
Your next steps