Asynchronous JS
Fetch API
Network Requests, AJAX
💡 fetch() ek waiter ko order bhejne jaisa hai — kitchen (server) se data maangna, bina poori restaurant (page) ko refresh kiye. Ye modern web apps ka foundation hai — data load karna bina page reload ke.
fetch(url) ek network request bhejta hai, Promise return karta hai jo Response object resolve karta hai. .json() se response body ko JavaScript object mein convert karte ho (ye bhi async hai, apna Promise return karta hai). fetch() modern replacement hai purane XMLHttpRequest ka.
// GET request:
async function getUsers() {
try {
const response = await fetch("https://api.example.com/users");
const data = await response.json(); // response body parse karo
console.log(data);
} catch (error) {
console.log("Fetch failed: " + error);
}
}
// POST request:
async function createUser(userData) {
const response = await fetch("https://api.example.com/users", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(userData)
});
return await response.json();
}🌐
fetch() ek waiter ko order bhejne jaisa hai — kitchen (server) se data maangna, bina poori restaurant (page) ko refresh kiye. Ye modern web apps ka foundation hai — data load karna bina page reload ke.
1 / 2
⚡ झट से Recap
- fetch(url) = network request, Promise return karta hai
- .json() = response body parse karna (bhi async)
- HTTP errors (404/500) automatically reject nahi hote — response.ok manually check karo
इस page में (2 subtopics)
fetch() 404/500 status par reject NAHI hota — response.ok (true agar status 200-299 range mein hai) manually check karna zaroori hai, warna error silently ignore ho jaata hai.
async function safeFetch(url) {
const response = await fetch(url);
if (!response.ok) {
throw new Error("HTTP error: " + response.status);
}
return await response.json();
}
try {
const data = await safeFetch("https://api.example.com/users/999");
} catch (error) {
console.log("Failed: " + error.message);
}Common Mistake: Bina response.ok check kiye, ek 404 "Not Found" response silently .json() try karega parse karne (jo fail ho sakta hai, ya khaali/error data de sakta hai) — proper error handling ke liye ye check ZAROORI hai.
AbortController se ek in-progress fetch() request cancel kar sakte ho — user ne page chhoda, ya naya search query type kar diya (purani request cancel karke), jaise use-cases mein useful.
const controller = new AbortController();
fetch("https://api.example.com/data", { signal: controller.signal })
.then(response => response.json())
.catch(err => {
if (err.name === "AbortError") {
console.log("Request cancel ho gayi");
}
});
// Kahi aur, request cancel karne ke liye:
controller.abort();Tip: AbortController especially search-as-you-type features mein useful hai — har naye keystroke par purani API request cancel karke, sirf latest wali complete hone do, race conditions avoid karta hai.