The fetch API is your modern gateway to making HTTP requests in JavaScript. Unlike the old XMLHttpRequest, fetch relies on Promises, making it cleaner and much easier to chain operations when handling responses. The basic form looks simple, but understanding what you get back is important to avoid common pitfalls.
When you call fetch(url), it returns a Promise that resolves to a Response object, not the actual data. This Response object contains information about the HTTP response, such as status code, headers, and more, but you still need to extract the body content manually.
fetch('https://api.example.com/data')
.then(response => {
console.log(response.status); // HTTP status code, e.g. 200
console.log(response.ok); // true if status is 200-299
console.log(response.headers.get('Content-Type')); // content-type header
});
One common misconception is expecting fetch to reject the Promise on a HTTP error status like 404 or 500. It doesn’t. The Promise only rejects on network failure or if something prevented the request from completing. You’ll need your own conditional checks on response.ok or response.status to handle HTTP-level errors gracefully.
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok: ' + response.statusText);
}
return response.json(); // Parses JSON body
})
.then(data => {
console.log(data);
})
.catch(error => {
console.error('Fetch error:', error);
});
Calling response.json() returns another Promise which resolves to the actual parsed JSON data. That’s important because the body is streamed and can’t be accessed synchronously. All data extraction methods—json(), text(), blob(), etc.—return Promises. This forces you to embrace asynchronous handling, but that’s a good thing; it promotes writing non-blocking code.
Dealing with fetch means mastering Promise chains and error handling. Remember that any breaking code inside then callbacks will be caught by the subsequent catch. This pattern is key for robust network communication without convoluted nested callbacks.
Here’s a simple, reusable function that wraps fetch calls for JSON data fetching while encapsulating error checking:
function fetchJson(url) {
return fetch(url)
.then(response => {
if (!response.ok) {
throw new Error('HTTP error: ' + response.status);
}
return response.json();
});
}
// Usage
fetchJson('/api/items')
.then(data => console.log('Items received:', data))
.catch(err => console.error('Failed to fetch:', err));
This approach keeps your core fetch logic DRY and focused. From here, you can layer in more complex error handling, request cancellation, or retries without rewriting the foundational code.
Another subtlety: the Response object’s body can only be used once. Trying to call response.json() again after it has already been read will produce an error. So plan your code flow to extract the data once and distribute it to whatever parts of your app need it. Sharing parsed result objects, not the Response itself, avoids this pitfall.
Once you get comfortable with this pattern, fetching data from APIs feels almost trivial. But don’t rush the parsing step—understand the shape and encoding of the incoming response. Feeding raw text into JSON parsing will blow up, and silently swallowing errors just to keep the UI going is a recipe for confusing bugs later.
In upcoming sections, we’ll dive into parsing JSON properly and structuring your asynchronous code for readability and maintainability. For now, get your feet wet by playing with fetch and experimenting with different response types – JSON, text, blobs – and observe how promises fold into JavaScript’s event loop.
Try this snippet to test status handling for a failing endpoint:
fetch('https://httpstat.us/404')
.then(response => {
if (!response.ok) {
console.error('Error status:', response.status); // 404
return Promise.reject('Not found');
}
return response.json();
})
.catch(error => console.error('Caught error:', error));
It’s the kind of error handling you absolutely want in place before launching code that talks to remote servers. Beyond that, fetch lets you handle headers, HTTP methods, credentials, redirects, and timeouts, but those are topics for another session.
Highwings HDMI Cable 6.6 ft, 4K HDMI 2.0 Cord with Ultra HD Stunning Clarity, Nylon Braided & Gold-Plated Connectors, HDR, Ethernet, ARC, 3D, HDCP 2.2, Compatible with for Wall-Mounted TV, Monitor
$6.69 (as of June 3, 2026 23:09 GMT +00:00 - More infoProduct prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on [relevant Amazon Site(s), as applicable] at the time of purchase will apply to the purchase of this product.)Parsing JSON data and working with asynchronous code
Parsing JSON data from a fetch response is simpler thanks to the built-in response.json() method, but this convenience masks the asynchronous nature of the operation. Remember, response.json() returns a Promise because the response body stream is read asynchronously and parsed under the hood. This means you need to chain another .then() or use async/await to work with the resulting data.
Mixing synchronous-style code with asynchronous operations leads to confusion and bugs. Instead, embrace async programming patterns either by continuing to chain Promises or by using async/await syntax, which can make your code more readable when properly used.
async function getJsonData(url) {
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error('Request failed with status ' + response.status);
}
const data = await response.json();
return data;
} catch (error) {
console.error('Error fetching or parsing:', error);
throw error;
}
}
// Usage
getJsonData('/api/users')
.then(users => console.log(users))
.catch(err => console.error('Fetch problem:', err));
Using async/await inside functions wrapping fetch calls not only reduces visual noise of multiple .then() chains but also centralizes your error handling in one place with try/catch. This pattern is especially useful in larger codebases where clarity trumps brevity.
Be aware that await response.json() can throw a SyntaxError if the response body isn’t valid JSON. This means your catch block must be prepared to handle parsing errors, not just network or HTTP errors.
Sometimes you’ll want to also inspect or read the raw response text before parsing so you can debug unexpected API responses or conditionally handle different content types:
async function fetchAndInspect(url) {
const response = await fetch(url);
if (!response.ok) {
throw new Error('HTTP error ' + response.status);
}
const text = await response.text();
console.log('Raw response:', text);
try {
const data = JSON.parse(text);
return data;
} catch (parseError) {
console.error('Invalid JSON:', parseError);
throw parseError;
}
}
This approach is more verbose but can be invaluable during development or when debugging APIs with inconsistent response formats. Note you can’t call response.json() after using response.text() because the stream is already read—choose one or the other depending on your needs.
For more complex flows, such as loading data and updating UI in steps, combining async functions with Promise utilities like Promise.all or Promise.race becomes particularly powerful. For example, fetching multiple JSON endpoints in parallel:
async function fetchMultipleJson(urls) {
const fetchPromises = urls.map(url => fetch(url).then(res => {
if (!res.ok) throw new Error(res.statusText);
return res.json();
}));
