AJAX & Async Requests·AJAX from first request to live updates

The request lifecycle

Follow a request from user action to rendered response.

Beginner 11 min read Lesson 1 of 300 Challenge included

What you will be able to do

Start with an explicit user action.
Show a loading state immediately.
Check status before parsing the body.
Render error, empty and success states.

In plain English

An AJAX request has stages: build the request, send it, wait, receive a status and body, then update the UI. Each stage can fail. Design the UI states before writing the request.

states.jsJavaScript

async function load() {
  setState('loading')
  try {
    const response = await fetch('/api/lessons')
    if (!response.ok) throw new Error('Request failed')
    setState('ready', await response.json())
  } catch {
    setState('error')
  }
}

Your turn

Check the status

Easy

Throw when a fetch response is not ok.

JAVASCRIPT · starter

const response = await fetch('/api/lessons')

Check your understanding before moving on.

Knowledge checkQuestion 1

What should you check before parsing a fetch response?

Select an answer to continue

Study tools

Make it yours.

Keep a private note for this lesson, then turn the key ideas into flashcards you can revisit.

Sign in to save notes and flashcards.Both are private to your account and stay with your progress.

Finished reading?

Lock in what you just learned.

Mark this lesson complete to save your place and move one step closer to the certificate.

Next: XMLHttpRequest

Lesson 1 of 300 · 0% of course