Fetch API
fetch(url) browser से HTTP अनुरोध भेजने को कहता है। यह तुरंत Promise लौटाता है जो सामान्यतः Response में पूरा होता है, parsed JSON में नहीं।
पहले Response, फिर data
await fetch(...) से status, headers और body stream मिलता है। response.json() body text पढ़कर JSON parse करता है और JavaScript data का दूसरा Promise देता है।
दो अलग चरण
response लाना और body parse करना अलग रखें। उपयोगी status वाले response की body JSON न भी हो सकती है।
📊 अनुरोध से data तक
| Expression | परिणाम | अर्थ |
|---|---|---|
| fetch(url) | Promise<Response> | अनुरोध शुरू |
| await fetch(url) | Response | status, headers और body stream |
| response.json() | Promise<any> | body पढ़ना और parse करना |
| await response.json() | JavaScript data | parsed object या value |
fetch Promise लौटाता है
स्वतंत्र उदाहरण केवल type दिखाने के लिए Blob URL उपयोग करता है। यह browser memory का resource है, same-origin HTTP endpoint नहीं।
const blob = new Blob(['{"drink":"lida tea"}'], { type: "application/json" });
const url = URL.createObjectURL(blob);
const ticket = fetch(url);
console.log(ticket instanceof Promise);
ticket.finally(() => URL.revokeObjectURL(url));
आउटपुट true है। असली app में Blob URL को /data/drink.json जैसे HTTP path से बदलें।
Response और फिर JSON await करें
अगला उदाहरण वही local resource बनाकर दोनों awaits करता है।
async function loadDrink() {
const blob = new Blob(['{"drink":"lida tea"}'], { type: "application/json" });
const url = URL.createObjectURL(blob);
try {
const response = await fetch(url);
if (!response.ok) throw new Error("HTTP " + response.status);
const data = await response.json();
console.log(data.drink);
} finally {
URL.revokeObjectURL(url);
}
}
loadDrink();
आउटपुट lida tea है। असली /data/drink.json में {"drink":"lida tea"} हो सकता है और पढ़ने का तरीका समान रहेगा।
HTTP errors साफ़ तौर पर जाँचें
HTTP 404 या 500 पर भी fetch सामान्यतः resolve होता है। network failure reject कर सकता है, खराब status अकेले प्रायः नहीं। response.ok या response.status देखें।
const response = new Response("Not found", {
status: 404,
statusText: "Not Found"
});
console.log(response.ok);
console.log(response.status);
बनाया गया response false और 404 दिखाता है—असली fetch के बाद भी यही properties देखेंगे। API की गारंटी के बिना error page को JSON न मानें।
json भी Promise देता है
json() body को asynchronously पढ़ता और parse करता है।
const response = new Response('{"drink":"lida tea"}', {
headers: { "Content-Type": "application/json" }
});
const dataPromise = response.json();
console.log(dataPromise instanceof Promise);
dataPromise.then(data => console.log(data.drink));
आउटपुट true है। await response.json() के बाद data JavaScript object और data.drink string है।
endpoint के बिना page demo
Demo Blob URL fetch करता है, इसलिए अकेले चलता है। यह flow और status 200 दिखाता है, server request होने का दावा नहीं करता।
<!DOCTYPE html>
<html>
<body>
<p id="cup">blank</p>
<p id="line">…</p>
<script>
async function load() {
const blob = new Blob(['{"drink":"lida tea"}'], { type: "application/json" });
const url = URL.createObjectURL(blob);
try {
const response = await fetch(url);
if (!response.ok) throw new Error("HTTP " + response.status);
const data = await response.json();
document.getElementById("cup").textContent = data.drink;
document.getElementById("line").textContent =
response.status + " / " + data.drink;
} finally {
URL.revokeObjectURL(url);
}
}
load();
</script>
</body>
</html>
Page 200 / lida tea दिखाती है। Production में HTTP URL रखें और parse करने से पहले ok जाँचते रहें।
अभ्यास
Local server पर /data/drink.json बनाकर Blob URL बदलें। फिर गायब path माँगें और ok तथा status की तुलना करें।
आम गलतियाँ
fetch के Promise को data न समझें। json() को call और await करना न भूलें। हर 404 के लिए केवल catch पर निर्भर न रहें।
याद रखें
fetch अनुरोध भेजकर Response का Promise देता है। ok जाँचें, फिर अपेक्षित body parse करें। response.json() JavaScript data का Promise देता है।
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी