Configuring Fetch Requests with `RequestInit`

Why it exists

The fetch API needs a standard way to handle more than just simple GET requests. RequestInit provides a structured, extensible options object to configure every aspect of an HTTP request, from its method and body to complex caching and security policies.

The mental model

Think of RequestInit as the configuration panel for a fetch call. If fetch(url) is like typing an address into your browser, fetch(url, requestInit) is like using a developer tool to build a custom request, specifying the method, headers, body, and how the browser should handle caching.

How it works

You pass a RequestInit object as the second argument to fetch(). This object contains key-value pairs that map to HTTP request features. For example, method: 'POST' sets the method. body: JSON.stringify(data) provides the payload. headers: { 'Content-Type': 'application/json' } tells the server how to interpret the body. Other properties like cache control browser-level behavior, such as 'no-store' to bypass the cache entirely or 'reload' to fetch from the server but update the cache.

When to use it

Use RequestInit whenever you need more than a default GET. This is essential for sending data to a server (POST, PUT, PATCH), deleting a resource (DELETE), controlling caching to ensure data freshness or improve performance, or making authenticated requests by managing credentials.

When not to use it

For a simple, unauthenticated GET request where the browser's default caching behavior is acceptable, you can omit the RequestInit object. Just passing the URL to fetch() is sufficient, as the browser uses sensible defaults.

One canonical example

To create a new user via a JSON API, you'd use a POST request. You would create an options object setting the method to 'POST', the headers to include 'Content-Type': 'application/json', and the body to the JSON.stringify()-ed user data. This object is then passed as the second argument to fetch('https://api.example.com/users', options).