Asynchronous JavaScript Course: Promises, async/await and fetch
Asynchronous JavaScript (Promises, fetch, APIs) is an intermediate-level course of 5 lessons (about 2 h 24 min), with 17 exercises and 15 quiz questions. Prerequisites: DOM and Events. Exercises run in the browser, with nothing to install.
- Front-end
- Intermediate
- 5 lessons
- 2 h 24 min
- 17 exercises
- Exercises run in the browser
The course in brief
This course explains how JavaScript handles operations that take time without blocking the page. You will move from callbacks to promises and then to async/await, learn to combine several operations and to consume a JSON API with fetch, handling errors, timeouts and cancellation. Every lesson ends with automatically tested exercises that run without a network, thanks to simulated responses.
What you will be able to do
- Explain the event loop and predict the execution order of asynchronous code
- Create, chain and secure promises with then, catch and finally
- Write readable async/await functions with try/catch error handling
- Combine operations with Promise.all, allSettled, race and any
- Consume a JSON API with fetch: GET, POST, status checks, timeouts and cancellation
- Make your network code testable by injecting a fake fetch function
Syllabus: 5 lessons
- Tell synchronous code from asynchronous code
- Explain the role of the call stack, the task queue and microtasks
- Predict the execution order of a program that uses setTimeout and callbacks
- 02
Promises: Creating, Chaining and Handling Errors
- Create a promise with the Promise constructor
- Chain operations with then, catch and finally
- Propagate and catch errors correctly in a chain
- 03
async/await and try/catch
- Write async functions and use await
- Handle asynchronous errors with try/catch/finally
- Distinguish sequential execution from concurrent execution
- 04
Combining Promises: all, allSettled, race, any
- Choose between Promise.all, Promise.allSettled, Promise.race and Promise.any
- Implement a maximum delay (timeout) around a promise
- Process a list of items concurrently
- 05
fetch: Consuming a JSON API
- Make GET and POST requests with fetch
- Check response.ok and read the JSON body
- Handle network errors, HTTP errors and cancellation with AbortController
Final project
A Resilient Weather and News Dashboard
Build a JavaScript module that loads a dashboard's data from three API endpoints (profile, weather, news). The profile is essential; weather and news may fail without blocking the display. Each call has a maximum delay, 5xx server errors are retried, and a news search cancels the previous request. The fetch function is injected so the whole thing can be tested with simulated responses.
Deliverables
- A chargerDashboard(fetchFn) module that returns { profil, meteo, actus, erreurs }
- A chargerJSON function with response.ok checking, a timeout and retry on 5xx errors
- A search function that cancels the previous request with AbortController
- A Node.js test suite (node:assert) using a fake fetch covering success, 404, 500 and timeout
- A short HTML page that displays the loading, error and success states
Assessment criteria
- Independent calls are started concurrently (Promise.all or allSettled as appropriate)
- HTTP errors and network errors are told apart and produce understandable messages
- No unhandled promise rejections
- The code is testable without a network and the tests pass
- The interface stays responsive and clearly shows each state
Frequently asked questions
What is the difference between a promise and async/await?
async/await is syntax built on top of promises: an async function returns a promise and await waits for its result. The behavior is the same, but the code reads from top to bottom and errors are handled with try/catch.
Why doesn't fetch throw an error on a 404 page?
fetch only rejects its promise on a network failure or a cancellation. A 404 or 500 response is a valid HTTP response: you need to check response.ok or response.status to treat it as an error.
Do I need to know callbacks to follow this course?
No, the first lesson introduces them. You only need the basics of JavaScript: variables, functions, arrays, objects and DOM manipulation.
Do the exercises make real network requests?
No. The exercises use local promises and Response objects built in the code, which lets you test them reliably and learn a good practice: injecting fetch to make your code testable.
This course, told for your job
Say what you want to be able to do: “Asynchronous JavaScript (Promises, fetch, APIs)” takes its place in your path, with examples from your field. The concepts stay those of the course.