Platform under construction

Async JavaScript

Advanced

Fetch

fetch is the browser API for making HTTP requests from JavaScript.

const response = await fetch("/data.json");

if (!response.ok) {
  throw new Error("Request failed");
}

const data = await response.json();

Async JavaScript

fetch resolves for HTTP responses, even many error responses.

fetch returns a promise that resolves to a Response object. The promise rejects for network-level failures, not for every HTTP error status.

Always check response.ok or response.status before trusting the response body.

Reading the body is async too. Use response.json, response.text, response.blob or stream reading depending on the data.

Request

Describes what should be fetched.

Response

Contains status, headers and body readers.

response.ok

True for status 200 through 299.

Body readers

json, text, blob and stream access.

Examples

Async code should show state, handle failure and avoid stale results.

Check response.ok before parsing

const response = await fetch(url);

if (!response.ok) {
  throw new Error(`HTTP ${response.status}`);
}

const data = await response.json();

Assuming every response is successful JSON

const data = await fetch(url).then(response => response.json());

// What if the server returns 404 or HTML?

Code patterns

Reusable examples for quick reference.

These examples are the async patterns you will reuse: timers, promises, composition, await, fetch and cancellation.

Basic fetch

Request a resource.

const response = await fetch("/api/items");

Check status

HTTP 404 still resolves to a Response.

if (!response.ok) {
  throw new Error(`HTTP ${response.status}`);
}

Read JSON

Body parsing is async.

const data = await response.json();

Send JSON

Set method, headers and body.

await fetch("/api/items", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify(data)
});

Rules that matter

Make time visible in your code.

Async JavaScript is easier when every operation has clear pending, success, failure and cancellation behavior.

Check response.ok

HTTP error statuses do not always reject fetch.

Parse the right body type

Use json for JSON and text for text.

Handle network failures

fetch can reject when the request cannot complete.

Set headers deliberately

Content-Type matters when sending JSON.

Do not trust response shape

Validate JSON before using it.

Consider cancellation

AbortController can stop requests that are no longer needed.

Production thinking

Reliable async code is what makes modern interfaces feel fast instead of fragile.

Why does this matter?

fetch is the main bridge between browser JavaScript and server data.

Accessibility

Fetched content should update visible loading, success and error messages.

Production note

Production fetch wrappers often centralize status checks, JSON parsing, timeout and reporting.

SEO note

Important content loaded only through fetch may need server rendering or reliable 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.

Change the data URL JSON value.
Add try/catch around fetch.
Read the response as text instead of JSON.

Practice assignment

Do this before moving to the next topic.

Call fetch.
Check response.ok.
Read the body with response.json.

HTML + JavaScript CSS

Live preview

Self-check

Before you continue, prove that you understand Fetch.