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

fetch

Use the promise-based API with options for methods and headers.

Beginner 13 min read Lesson 3 of 300 Challenge included

What you will be able to do

Pass method, headers and body in options.
Parse the body once.
Use AbortController for cancellation.
Handle network errors with try/catch.

In plain English

fetch takes a URL and an options object. It resolves when headers arrive, not when the body finishes. Parse with json(), text() or blob() exactly once. Use AbortController to cancel.

fetch.jsJavaScript

const controller = new AbortController()
const response = await fetch('/api/lessons', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ title: 'CSS' }),
  signal: controller.signal,
})
const data = await response.json()

Your turn

Send JSON

Easy

Write a fetch POST with a JSON body and Content-Type header.

JAVASCRIPT · starter

fetch('/api/lessons')

Check your understanding before moving on.

Knowledge checkQuestion 1

When does fetch reject?

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: JSON APIs

Lesson 3 of 300 · 0% of course