Loading lesson path
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);
});Response object, not the 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);
});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();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();The above handles HTTP errors correctly.
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");
}
}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);
}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.
Loading data.json Using a Callback function loadFile(callback) {
let xhr = new XMLHttpRequest();
xhr.open("GET", "data.json", true);
xhr.onload = function() {
if (xhr.status === 200) {
callback(null, JSON.parse(xhr.responseText));
} else {
callback("HTTP Error: " + xhr.status, null);
}
};
xhr.onerror = function() {
callback("Network Error", null);
};
xhr.send();
}
loadFile(function(error, data) {
if (error) {
console.log(error);
return;
}
console.log(data);
});
Callback Explained loadFile() does not return the dataThe callback runs when the file is loaded
Loading data.json Using Fetch async function loadFile() {
try {
let response = await fetch("data.json");
if (!response.ok) {
throw new Error("HTTP Error: " + response.status);
}
let data = await response.json();
console.log(data);
} catch (error) {
console.log(error);
}
}
loadFile();
Fetch Explained fetch() returns a promise await pauses inside the functionErrors are handled with try...catch
Formula
Promise / async - awaitThe next page shows how to debug async code like a professional. You will learn breakpoints, logging patterns, and why async errors feel invisible.