JavaScript Request vs Response Object Differences

In modern JavaScript, the Fetch API provides standardized Request and Response interfaces to handle HTTP communication across browsers, Service Workers, and server-side runtimes like Node.js and Deno. This article breaks down the fundamental differences between these two objects, detailing their unique properties, methods, and specific roles in the client-server lifecycle.

The Fundamental Difference

The core distinction lies in the direction of data flow and the HTTP semantics each object represents:

• Request Object: Represents an HTTP request sent from a client (such as a browser) to a server to initiate an action or retrieve a resource.
• Response Object: Represents the HTTP response returned by the server back to the client, carrying the outcome of the request, metadata, and the requested payload.

The Request Object

A Request object encapsulates all the parameters required to perform an HTTP call. While you often pass a URL and an options object directly to fetch(), instantiating a new Request() allows you to create reusable, pre-configured request templates.

Key Properties:

• url: The destination URL of the request.
• method: The HTTP verb (e.g., GET, POST, PUT, DELETE). Defaults to GET.
• headers: A Headers object containing request headers like Content-Type or Authorization.
• body: The payload sent to the server (for methods like POST or PUT).
• mode: The security mode of the request (e.g., cors, no-cors, same-origin).
• credentials: Controls whether cookies and authentication headers are sent (e.g., omit, same-origin, include).
• cache: Dictates how the request interacts with the browser’s HTTP cache.

Example Usage:

const request = new Request('https://api.example.com/data', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Alice' })
});

fetch(request);

The Response Object

A Response object represents the result returned by an HTTP operation. It is generated automatically when a fetch() promise resolves, but can also be manually instantiated in server environments or Service Workers to return data to a client.

Key Properties:

• status: The HTTP status code returned by the server (e.g., 200, 404, 500).
• statusText: The status message corresponding to the status code (e.g., "OK", "Not Found").
• ok: A boolean convenience property that returns true if the status code is between 200 and 299.
• headers: A Headers object containing the response headers sent by the server.
• redirected: Indicates whether the request resulted in a redirect.
• type: The type of the response (e.g., basic, cors, opaque, error).

Example Usage:

const response = await fetch('https://api.example.com/data');

if (response.ok) {
  const data = await response.json();
  console.log(data);
} else {
  console.error(`HTTP Error: ${response.status} ${response.statusText}`);
}

Comparison Summary

Shared Characteristics: The Body Mixin

Despite their differences, both Request and Response implement the Body interface. This means both objects handle streaming payloads similarly and provide identical methods to read and parse data:

• .json(): Parses the body stream as JSON.
• .text(): Reads the body stream as plain text.
• .blob(): Reads the body as a binary Blob.
• .arrayBuffer(): Reads the body as an ArrayBuffer.
• .formData(): Parses the body as FormData.

Because the body is a readable stream, it can only be read once by either object unless cloned using the .clone() method.