JavaScript Fetch API and Working With APIs

1What Is the Fetch API?

The Fetch API is a built-in browser interface for making HTTP requests directly from JavaScript. You call fetch with a URL and it returns a promise that resolves to a Response object, from which you extract the data you want. It replaced the older, clunkier XMLHttpRequest and needs no external library.

In everyday terms, fetch is how your page asks a server for data — a list of products, the current weather, a user profile — and receives it without a full page reload. Almost every dynamic web app relies on it, directly or through a wrapper built on top of it.

2Making a Basic GET Request

The simplest fetch retrieves data. Because responses arrive asynchronously, you work with promises. A common source of confusion is that reading the body as JSON is itself asynchronous, so you often see two steps: get the response, then parse it.

• fetch('/api/users') # returns a promise
• .then(response => response.json()) # parse the body, also a promise
• .then(data => console.log(data)) # use the parsed data
• .catch(error => console.error(error)) # handle network failures

3Cleaner Code With async/await

Promise chains work, but async/await makes fetch code read like ordinary top-to-bottom steps. You mark the function async, await the fetch, then await the parsing. It is the same behaviour with clearer flow, and it pairs naturally with try/catch for errors.

This style is now the default in most codebases because it keeps related logic together and avoids deeply nested then callbacks. Once you are comfortable with it, complex sequences of requests become much easier to follow.

• async function loadUsers() {
• const res = await fetch('/api/users')
• if (!res.ok) throw new Error('Request failed: ' + res.status)
• const data = await res.json()
• return data
• }

4The Error-Handling Gotcha

The single biggest surprise with fetch is that it does not treat HTTP error codes as failures. A 404 or 500 response still resolves the promise successfully — fetch only rejects when the network itself fails. You must inspect response.ok or response.status yourself and throw when something is wrong.

This trips up nearly every beginner. Their catch block never runs on a 404 because, as far as fetch is concerned, it got a valid response. Adding an explicit ok check is the fix and should be part of every fetch you write.

5Sending Data With POST

To create or update data, you pass a second argument to fetch: an options object. You set the method, add a Content-Type header so the server knows you are sending JSON, and provide the body as a JSON string via JSON.stringify. The same shape works for PUT and DELETE by changing the method.

• fetch('/api/users', {
• method: 'POST',
• headers: { 'Content-Type': 'application/json' },
• body: JSON.stringify({ name: 'Ada', role: 'admin' })
• })

6Headers, Query Strings, and Response Types

Real requests need more than a URL. Headers carry metadata like content type and authentication, query strings filter results, and responses come in more shapes than JSON. Knowing how to build a URL and read the right body type keeps you from fighting the API.

Use the URL and URLSearchParams helpers to assemble query strings safely instead of concatenating by hand. On the response, pick the reader that matches the payload — json for JSON, text for plain text, and blob for binary data like images or files.

• const url = new URL('/api/search', location.origin)
• url.searchParams.set('q', term) # safely encodes the query
• await res.text() # read a plain-text body
• await res.blob() # read binary data such as an image

7Best Practices for Working With APIs

A few habits make API code reliable and pleasant to maintain, especially as an app grows and calls multiply.

• Always check response.ok and throw a clear error on failure.
• Wrap fetch in a small helper so you set headers and error handling in one place.
• Never hardcode secret API keys in frontend code — they are visible to anyone.
• Show loading and error states in the UI so users are not left staring at a blank screen.
• Use AbortController to cancel requests that are no longer needed, such as on rapid navigation.

8Key Takeaways

The essentials of fetch come down to a short, dependable pattern.

• fetch returns a promise resolving to a Response; call response.json() to parse the body.
• fetch only rejects on network errors — check response.ok for HTTP errors yourself.
• Use async/await with try/catch for readable, robust request code.
• Send data by passing method, headers, and a JSON.stringify body in the options object.
• Wrap fetch in a helper and always surface loading and error states to users.

9Frequently Asked Questions

Q: Why does fetch not throw on a 404? A: By design, fetch only rejects its promise for network-level failures. HTTP error statuses like 404 or 500 count as successful responses. You must check response.ok or response.status and throw yourself.

Q: Do I need axios if fetch is built in? A: Not necessarily. fetch handles most needs natively. Libraries like axios add conveniences such as automatic JSON parsing, interceptors, and simpler error handling, but many projects use fetch alone or a thin wrapper.

Q: How do I send authentication with fetch? A: Add an Authorization header in the options object, for example headers with a Bearer token. For cookie-based auth, set credentials to 'include' so cookies are sent with the request.

Q: How do I cancel a fetch request? A: Create an AbortController, pass its signal to fetch, and call controller.abort() when you want to stop the request. This is useful for search-as-you-type and when a user navigates away.