Fetch API Introduction – Beginners Guide to JavaScript Fetch API
Watch this lesson to understand Fetch API Introduction – Beginners Guide to JavaScript Fetch API — takes about 30 minutes.
What You Will Learn
- Fetch API का परिचय और इसका उपयोग करके डेटा फेच करना
- Fetch API का उपयोग करके पोस्ट रिक्वेस्ट करना
- ES6 तकनीकों जैसे कि एरो फंक्शन और टेम्पलेट स्ट्रिंग्स का उपयोग करना
Key Concepts
Fetch API एक मॉडर्न जावास्क्रिप्ट API है जो हमें सर्वर से डेटा फेच करने की अनुमति देता है। यह XMLHttpRequest की तुलना में अधिक सरल और उपयोगकर्ता-मित्र है। Fetch API का उपयोग करके हम GET और POST रिक्वेस्ट दोनों कर सकते हैं। ES6 तकनीकों जैसे कि एरो फंक्शन और टेम्पलेट स्ट्रिंग्स का उपयोग करके हम अपना कोड अधिक स्वच्छ और प्रभावी बना सकते हैं।
Code Examples
fetch('sample.txt')
.then(res => res.text())
.then(data => console.log(data));
// यह कोड सैंपल.txt फाइल से डेटा फेच करता है और कंसोल में लॉग करता है
fetch('users.json')
.then(res => res.json())
.then(data => {
let output = '';
data.forEach(user => {
output += `<h2>${user.name}</h2>`;
});
document.getElementById('output').innerHTML = output;
});
// यह कोड users.json फाइल से डेटा फेच करता है और उसे वेब पेज पर प्रदर्शित करता है
Lesson Summary
इस लेसन में, हमने Fetch API का परिचय दिया और इसका उपयोग करके डेटा फेच करने के तरीके के बारे में सीखा। हमने देखा कि Fetch API का उपयोग करके हम GET और POST रिक्वेस्ट दोनों कर सकते हैं। हमने ES6 तकनीकों जैसे कि एरो फंक्शन और टेम्पलेट स्ट्रिंग्स का उपयोग करके अपना कोड अधिक स्वच्छ और प्रभावी बनाने के तरीके के बारे में भी सीखा। हमने विभिन्न उदाहरणों के माध्यम से Fetch API का उपयोग करके डेटा फेच करने और उसे वेब पेज पर प्रदर्शित करने के तरीके के बारे में सीखा।
Practice Exercise
एक साधारण वेब पेज बनाएं जो Fetch API का उपयोग करके एक JSON फाइल से डेटा फेच करता है और उसे वेब पेज पर प्रदर्शित करता है।
What Is Next
अब आप Fetch API के बारे में अधिक जानने के लिए तैयार हैं। अगले लेसन में, हम Fetch API के अधिक उन्नत विषयों जैसे कि हैंडलिंग एरर और कैचिंग एक्सेप्शन्स के बारे में सीखेंगे।
Go deeper on Modern JavaScript — ES6 से Async/Await तक
Hand-picked books and tools our learners actually use. Affiliate-supported — same price for you, supports free lessons.