JavaScript fetch API
fetch() is the modern way to request data from a server
fetch() is asynchronous and returns a promise
Modern apps use async code to get data
fetch() is the most common example
fetch Returns a Promise
fetch() does not return the data.
It returns a promise that becomes a response later.
Example
fetch("data.json")
.then(function(response) {
console.log(response);
});
The result is a Response object, not the JSON data.
Getting JSON Data
To get JSON, you must read the response body.
response.json() returns a promise.
Example
fetch("data.json")
.then(function(response) {
return response.json();
})
.then(function(data) {
console.log(data);
});
Note
The above is a promise chain.
fetch with async and await
async and await make fetch code easier to read.
This is the recommended way for beginners.
Example
async function loadData() {
let response = await fetch("data.json");
let data = await response.json();
console.log(data);
}
loadData();
Important: HTTP Errors
A common beginner mistake is expecting fetch to fail on 404 or 500.
Fetch only rejects on network errors.
A 404 response is not a rejected promise.
You must check response.ok.
Example
async function loadData() {
let response = await fetch("missing.json");
if (!response.ok) {
console.log("HTTP Error:", response.status);
return;
}
let data = await response.json();
console.log(data);
}
loadData();
Note
The above handles HTTP errors correctly.
Network Errors
A network error happens when the request cannot be completed.
This includes offline mode and DNS errors.
Network errors reject the promise.
Example
async function loadData() {
try {
let response = await fetch("data.json");
let data = await response.json();
console.log(data);
} catch (error) {
console.log("Network error");
}
}
Common fetch Mistakes
Forgetting await gives you a promise instead of data.
Example
async function loadData() {
let response = await fetch("data.json");
let data = response.json();
console.log(data);
}
This logs a promise.
You must use await to get the JSON.
Example
async function loadData() {
let response = await fetch("data.json");
let data = await response.json();
console.log(data);
}
Debugging Tip
If fetch is not working, check the console.
Then check the Network tab.
- Is the file path correct.
- Is the status code 200.
- Is the response JSON.
Most fetch bugs are not JavaScript bugs.
They are path and response problems.
Next Chapter
The next page shows how to debug async code like a professional.
You will learn breakpoints, logging patterns, and why async errors feel invisible.
