लाना (अनुरूपित)

वास्तविक पृष्ठ पर, fetch(url) एक सर्वर को कॉल करता है। यहां सीखने वाले ब्राउज़र में हम नहीं कर सकते बाहरी सर्वर से बात करें, इसलिए हम परीक्षणों में "नकली" fetch का उपयोग करेंगे, a globalThis.fetch इंजेक्ट है जो पूर्वनिर्धारित डेटा लौटाता है, ताकि आप अभ्यास कर सकें नेटवर्क पर निर्भर हुए बिना तर्क।

आप जिस एपीआई की परवाह करते हैं वह वास्तविक एपीआई के समान ही है:

const response = await fetch('/api/utenti');
const data = await response.json();

fetch(url) एक वादा लौटाता है जो Response ऑब्जेक्ट का समाधान करता है। Response.json() रिटर्न बदले में पार्स किए गए मुख्य भाग के साथ एक वादा। तो आपको दो प्रतीक्षा की आवश्यकता है।

पूरा उदाहरण

async function loadUsers() {
  const response = await fetch('/api/utenti');
  const users = await response.json();
  return users;
}

const list = await loadUsers();
// [{...}, {...}]

जाँच कर रहा हूँ कि क्या यह सफल हुआ

fetch यदि सर्वर त्रुटि स्थिति (404, 500) के साथ प्रतिक्रिया करता है तो फेंकता नहीं। यह अभी भी आपको देता है एक Response, लेकिन ok: false के साथ:

const r = await fetch('/api/utenti');
if (!r.ok) {
  throw new Error(`HTTP ${r.status}`);
}
const data = await r.json();

fetch केवल तभी फेंकता है जब नेटवर्क विफल हो जाता है (कोई कनेक्शन नहीं, DNS, ...)।

समानांतर में एकाधिक अनुरोध: Promise.all

यदि आपको एन स्वतंत्र कॉल करने की आवश्यकता है, तो उन्हें एक साथ लॉन्च करें और Promise.all के साथ उन सभी की प्रतीक्षा करें:

const [u, p] = await Promise.all([
  fetch('/api/utenti').then((r) => r.json()),
  fetch('/api/prodotti').then((r) => r.json()),
]);

क्रमिक रूप से लगातार दो awaits के साथ इसमें लगभग दोगुना समय (योग) लगेगा; समानांतर में यह है दोनों में से अधिकतम (सबसे धीमा)।

इसे अजमाएं

व्यायाम की समीक्षा करें