Fetch API Introduction – Beginners Guide to JavaScript Fetch API

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 के अधिक उन्नत विषयों जैसे कि हैंडलिंग एरर और कैचिंग एक्सेप्शन्स के बारे में सीखेंगे।