From Callback Hell to Modern Fetch
Sum of 10 numbers:
â
=
â
âą
â
đ Click a button to compare approaches...
đĢ Never Use
Deprecated â blocks the entire browser!
XHR Sync blocks the entire UI!
The browser freezes completely â user cannot scroll, click, or interact with anything until the request completes. This is deprecated and should never be used in production!
// đĢ XHR SYNCHRONOUS: NEVER USE THIS!
// The third parameter "false" makes it synchronous
// đ Note: We write 10 explicit calls for clarity
// Using DummyJSON API - fetching product prices as random numbers
const getAPI = () => `https://dummyjson.com/products/${Math.ceil(Math.random()*100)}`;
const xhr1 = new XMLHttpRequest();
xhr1.open("GET", getAPI(), false); xhr1.send();
const n1 = Math.round(JSON.parse(xhr1.responseText).price);
const xhr2 = new XMLHttpRequest();
xhr2.open("GET", getAPI(), false); xhr2.send();
const n2 = Math.round(JSON.parse(xhr2.responseText).price);
const xhr3 = new XMLHttpRequest();
xhr3.open("GET", getAPI(), false); xhr3.send();
const n3 = Math.round(JSON.parse(xhr3.responseText).price);
// ... (n4 through n9 same pattern) ...
const xhr10 = new XMLHttpRequest();
xhr10.open("GET", getAPI(), false); xhr10.send();
const n10 = Math.round(JSON.parse(xhr10.responseText).price);
const sum = n1 + n2 + n3 + n4 + n5 + n6 + n7 + n8 + n9 + n10;
console.log("Sum:", sum);
// đĢ UI was frozen the whole time!
â Avoid
Deep nesting, repeated error handling, hard to maintain
// đ° CALLBACK HELL: 10 nested callbacks!
// đ Note: We show all 10 levels explicitly for clarity
// Using DummyJSON API - fetching product prices as random numbers
const getAPI = () => `https://dummyjson.com/products/${Math.ceil(Math.random()*100)}`;
const getRandomAsync = (onSuccess, onFail) => {
const xhr = new XMLHttpRequest();
xhr.open("GET", getAPI(), true);
xhr.onload = () => xhr.status === 200
? onSuccess(Math.round(JSON.parse(xhr.response).price))
: onFail(xhr.status);
xhr.onerror = () => onFail("Network error");
xhr.send();
};
// The pyramid of doom đą
getRandomAsync(n1 => {
getRandomAsync(n2 => {
getRandomAsync(n3 => {
getRandomAsync(n4 => {
getRandomAsync(n5 => {
getRandomAsync(n6 => {
getRandomAsync(n7 => {
getRandomAsync(n8 => {
getRandomAsync(n9 => {
getRandomAsync(n10 => {
const sum = n1+n2+n3+n4+n5+n6+n7+n8+n9+n10;
console.log("Sum:", sum);
}, e => console.error(e));
}, e => console.error(e));
}, e => console.error(e));
}, e => console.error(e));
}, e => console.error(e));
}, e => console.error(e));
}, e => console.error(e));
}, e => console.error(e));
}, e => console.error(e));
}, e => console.error(e));
// âąī¸ Total time: ~2000ms (sequential!)
â Better
Flat chain, single error handler, but still sequential
// đ PROMISE CHAINS: Flat but still sequential!
// đ Note: We show all 10 .then() explicitly for clarity
// Using DummyJSON API - fetching product prices as random numbers
const getAPI = () => `https://dummyjson.com/products/${Math.ceil(Math.random()*100)}`;
const getRandomFromServer = () => {
return fetch(getAPI())
.then(res => { if (!res.ok) throw new Error(`HTTP ${res.status}`); return res.json(); })
.then(data => Math.round(data.price));
};
let n1, n2, n3, n4, n5, n6, n7, n8, n9, n10;
getRandomFromServer()
.then(n => { n1 = n; return getRandomFromServer(); })
.then(n => { n2 = n; return getRandomFromServer(); })
.then(n => { n3 = n; return getRandomFromServer(); })
.then(n => { n4 = n; return getRandomFromServer(); })
.then(n => { n5 = n; return getRandomFromServer(); })
.then(n => { n6 = n; return getRandomFromServer(); })
.then(n => { n7 = n; return getRandomFromServer(); })
.then(n => { n8 = n; return getRandomFromServer(); })
.then(n => { n9 = n; return getRandomFromServer(); })
.then(n => {
n10 = n;
const sum = n1 + n2 + n3 + n4 + n5 + n6 + n7 + n8 + n9 + n10;
console.log("Sum:", sum);
})
.catch(err => console.error(err));
// âąī¸ Total time: ~2000ms (still sequential!)
â
Recommended
Clean, reads like sync code, easy try/catch â but still sequential!
// ⨠ASYNC/AWAIT: Clean but SEQUENTIAL (slow for 10 requests!)
// đ Note: We show all 10 await calls explicitly for clarity
// Using DummyJSON API - fetching product prices as random numbers
const getAPI = () => `https://dummyjson.com/products/${Math.ceil(Math.random()*100)}`;
const getRandomFromServer = async () => {
const response = await fetch(getAPI());
if (!response.ok) throw new Error(`HTTP ${response.status}`);
const data = await response.json();
return Math.round(data.price);
};
(async () => {
// â ī¸ Each await WAITS for the previous one!
const n1 = await getRandomFromServer();
const n2 = await getRandomFromServer();
const n3 = await getRandomFromServer();
const n4 = await getRandomFromServer();
const n5 = await getRandomFromServer();
const n6 = await getRandomFromServer();
const n7 = await getRandomFromServer();
const n8 = await getRandomFromServer();
const n9 = await getRandomFromServer();
const n10 = await getRandomFromServer();
const sum = n1 + n2 + n3 + n4 + n5 + n6 + n7 + n8 + n9 + n10;
console.log("Sum:", sum);
})();
// âąī¸ Total time: ~2000ms (10 sequential requests)
đ Best
Parallel execution â 10Ã faster for independent requests!
// ⥠PROMISE.ALL: All 10 requests run at the SAME TIME!
// đ Note: We show all 10 calls explicitly for clarity
// Using DummyJSON API - fetching product prices as random numbers
const getAPI = () => `https://dummyjson.com/products/${Math.ceil(Math.random()*100)}`;
const getRandomFromServer = async () => {
const response = await fetch(getAPI());
if (!response.ok) throw new Error(`HTTP ${response.status}`);
const data = await response.json();
return Math.round(data.price);
};
(async () => {
// đ All 10 requests start simultaneously!
const [n1, n2, n3, n4, n5, n6, n7, n8, n9, n10] = await Promise.all([
getRandomFromServer(),
getRandomFromServer(),
getRandomFromServer(),
getRandomFromServer(),
getRandomFromServer(),
getRandomFromServer(),
getRandomFromServer(),
getRandomFromServer(),
getRandomFromServer(),
getRandomFromServer()
]);
const sum = n1 + n2 + n3 + n4 + n5 + n6 + n7 + n8 + n9 + n10;
console.log("Sum:", sum);
})();
// âąī¸ Total time: ~200ms (all 10 in parallel!)
// đ That's 10Ã FASTER than sequential!
Sequential
When each request depends on the previous
Promise.all
When requests are independent (fastest!)
Promise.allSettled
When you want results even if some fail
Promise.race
When you need only the fastest response