FSM Full Stack Masterclass
Platform under construction
JavaScript course badge

JSON & Structured Data

Advanced

Request, Response & Headers

Request, Response and Headers are the structured objects behind fetch. They model HTTP messages in JavaScript.

const request = new Request("/api/records", {
  headers: { Accept: "application/json" }
});

console.log(request.headers.get("Accept"));

JSON & Structured Data

Fetch works with structured HTTP objects, not only URL strings.

Request represents an outgoing HTTP request. Response represents an incoming HTTP response. Headers stores HTTP header names and values.

You can pass a URL and options to fetch, or you can create a Request object first. Response objects can also be created manually for tests and demos.

Always check response.ok before trusting response data. HTTP errors such as 404 or 500 do not automatically reject the fetch promise.

Request

Represents method, URL, headers and body for an outgoing request.

Response

Represents status, headers and body returned by a request.

Headers

Case-insensitive header collection.

response.ok

True for successful 2xx status codes.

Examples

Structured data code should show the boundary clearly.

Check ok before reading JSON

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

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

const data = await response.json();

Assuming every response is successful

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

// A 500 response can still reach this line.

Syntax reference

Named examples you can scan, copy, change and understand.

This is the practical reference part of the lesson. Each example has one job, a stable anchor and a small assignment, so the page works both as a course and as a developer reference when you need the syntax later.

Create Request

Prepare a request object.

const request = new Request("/api/records", {
  method: "GET",
  headers: { Accept: "application/json" }
});

What to notice

  • Read the variable names before the syntax.
  • Change one value and predict the result before running it.

Try it yourself

  1. Rename one value and update every place where it is used.
  2. Add one console.log line that proves what the example returns.

Read Headers

Headers names are case-insensitive.

const headers = new Headers({
  "Content-Type": "application/json"
});

console.log(headers.get("content-type"));

What to notice

  • Read the variable names before the syntax.
  • Change one value and predict the result before running it.

Try it yourself

  1. Rename one value and update every place where it is used.
  2. Add one console.log line that proves what the example returns.

Check response

Do not parse failed HTTP responses blindly.

const response = await fetch(request);

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

What to notice

  • Read the variable names before the syntax.
  • Change one value and predict the result before running it.

Try it yourself

  1. Rename one value and update every place where it is used.
  2. Add one console.log line that proves what the example returns.

Manual Response

Useful for tests and examples.

const response = new Response(JSON.stringify({ ok: true }), {
  headers: { "Content-Type": "application/json" }
});

What to notice

  • Read the variable names before the syntax.
  • Change one value and predict the result before running it.

Try it yourself

  1. Rename one value and update every place where it is used.
  2. Add one console.log line that proves what the example returns.

Code patterns

Reusable examples for quick reference.

These patterns focus on the data boundaries you will use constantly: JSON, URLs, forms, files, fetch objects and binary buffers.

Create Request

Prepare a request object.

const request = new Request("/api/records", {
  method: "GET",
  headers: { Accept: "application/json" }
});

Read Headers

Headers names are case-insensitive.

const headers = new Headers({
  "Content-Type": "application/json"
});

console.log(headers.get("content-type"));

Check response

Do not parse failed HTTP responses blindly.

const response = await fetch(request);

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

Manual Response

Useful for tests and examples.

const response = new Response(JSON.stringify({ ok: true }), {
  headers: { "Content-Type": "application/json" }
});

Rules that matter

Parse, validate and convert data at the edges.

Structured data becomes reliable when every boundary is explicit: text to object, form to values, URL to parameters, response to JSON and bytes to meaning.

Check response.ok

Fetch only rejects for network-level failures by default.

Use Headers for header logic

It normalizes access and casing.

Set Accept deliberately

Tell the server what response type you expect.

Set Content-Type for JSON bodies

JSON request bodies should say they are JSON.

Read body once

Response body streams can usually be consumed only once.

Handle status and parse errors separately

HTTP success and valid JSON are different concerns.

Production thinking

Trust data only after the code has proved its shape.

Why does this matter?

Request and Response make HTTP behavior explicit, which is essential for reliable API code.

Accessibility

API errors should become clear user-facing status messages instead of silent failures.

Production note

Production fetch wrappers should handle timeout, abort, status codes and parse errors consistently.

SEO note

Client-side data fetching should not hide critical crawlable content when SEO matters.

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 status to 404 and inspect response.ok.
  • Add another response header.
  • Try reading response.json twice and explain what happens.

Practice assignment

Do this before moving to the next topic.

  1. Create a Request object.
  2. Create a Headers object.
  3. Check response.ok before parsing.

Try it yourself

Inspect a manual Response

Live preview

Self-check

Before you continue, prove that you understand Request, Response & Headers.

Advanced

Structured data is safe only when you know where it came from, what shape it has and what conversion happened before use.

  1. Can you explain Request?
  2. Can you explain Response?
  3. Can you explain Headers?
  4. Can you explain why response.ok matters?
  5. Can you explain why response bodies are read once?