Request and Response Bodies

HTTP bodies carry application data between a frontend client and a server, commonly using JSON, text, form data, or binary formats. With `fetch()`, the request body is sent explicitly, while response data is read through methods such as `json()` or `text()`.

An HTTP request can contain a body after its headers. The body carries data that the server may use to create, update, or process a resource; `GET` requests commonly omit bodies, while `POST`, `PUT`, and `PATCH` frequently include them.

The body format is independent of HTTP itself. Common formats include JSON, URL-encoded form data, multipart form data, plain text, and binary data. The `Content-Type` header tells the receiver how to interpret the body; for example, JSON is normally identified with `application/json`.

In browser JavaScript, `fetch()` accepts a request body through the `body` option. Objects are not automatically converted into JSON, so a typical JSON request uses `JSON.stringify(data)` and sets an appropriate `Content-Type` header.

A response can also contain a body. With `fetch()`, methods such as `response.json()`, `response.text()`, and `response.blob()` read and decode that body into a usable JavaScript value. These methods are asynchronous because the response body may still need to be received or consumed.

Key points

• Request bodies carry client-to-server data; response bodies carry server-to-client data.
• `Content-Type` describes the media type of a body.
• JSON request bodies normally require `JSON.stringify()` before being passed to `fetch()`.
• `response.json()` parses a JSON response body and returns a promise.
• A body can contain text, structured data, form data, or binary content.

Interview questions

How do you send JSON with `fetch()`?

Create the JavaScript data object and serialize it with `JSON.stringify()`. Pass the resulting string as the `body` option. Set `Content-Type` to `application/json` so the server knows how to interpret the body.

How do you read JSON from a `fetch()` response?

Call `response.json()` on the `Response` object. It returns a promise that resolves to the parsed JavaScript value. Therefore, code commonly uses `const data = await response.json()` inside an asynchronous function.

What is the purpose of `Content-Type`?

`Content-Type` identifies the media type of the message body. It lets the recipient choose an appropriate parser or interpretation, such as treating a body as JSON or multipart form data. It describes the representation of the body rather than the HTTP operation itself.

What is the difference between `Content-Type` and `Accept`?

`Content-Type` describes the representation being sent in the current message body. `Accept` expresses which response media types the client is prepared to receive. For example, a client can send JSON with `Content-Type: application/json` while requesting a JSON response with `Accept: application/json`.

Why might `response.json()` fail even when the HTTP request succeeded?

An HTTP success status does not guarantee that the response body is valid JSON. The server might return HTML, plain text, an empty body, or malformed JSON despite returning a successful status. Calling `response.json()` attempts to parse the body as JSON, so invalid or incompatible content can cause the parsing promise to reject.