परिचय
फ़ेच एपीआई एक प्रमुख विकास का प्रतिनिधित्व करता है कि वेब एप्लिकेशन सर्वर के साथ कैसे इंटरैक्ट करते हैं और नेटवर्क पर सामग्री पुनर्प्राप्त करते हैं। XMLHttpRequest (XHR) के आधुनिक विकल्प के रूप में पेश किया गया, Fetch API डेवलपर्स के लिए अधिक शक्ति, लचीलापन और सरलता प्रदान करता है। आधुनिक ब्राउज़रों में अपने एकीकरण के साथ, फ़ेच समकालीन वेब अनुप्रयोगों के निर्माण में एक महत्वपूर्ण उपकरण बन गया है, जो अतुल्यकालिक संचालन के अधिक प्राकृतिक और कुशल संचालन को सक्षम बनाता है।

फ़ेच एपीआई क्या है?
फ़ेच एपीआई एक जावास्क्रिप्ट इंटरफ़ेस है जो HTTP अनुरोध भेजने और नेटवर्क प्रतिक्रियाओं को संभालने को सरल बनाता है। पुराने XMLHttpRequest के विपरीत, जो अपनी जटिलता और भद्दे सिंटैक्स के लिए कुख्यात था, Fetch एक सुव्यवस्थित इंटरफ़ेस प्रदान करता है जो जावास्क्रिप्ट के प्रॉमिस एपीआई के साथ सहजता से एकीकृत होता है। यह एकीकरण न केवल अतुल्यकालिक संचालन को प्रबंधित करना आसान बनाता है बल्कि कोड पठनीयता और रखरखाव में भी सुधार करता है, जिससे आपका कोडबेस साफ-सुथरा और अधिक प्रबंधनीय हो जाता है।

इसके मूल में, फ़ेच फ़ेच() फ़ंक्शन के आसपास बनाया गया है, जो आधुनिक ब्राउज़र में उपलब्ध एक वैश्विक फ़ंक्शन है जो नेटवर्क अनुरोध भेजता है। यह फ़ंक्शन एक वादा लौटाता है जो रिस्पांस ऑब्जेक्ट को हल करता है, डेवलपर्स को रिस्पांस डेटा, हेडर और स्थिति तक आसान पहुंच प्रदान करता है। यह नेटवर्क अनुरोधों के परिणामों को संभालने के लिए अधिक सहज और संगठित दृष्टिकोण की अनुमति देता है। (और पढ़ें)

बेसिक सिंटैक्स
फ़ेच एपीआई फ़ेच() फ़ंक्शन के चारों ओर घूमती है, जिसे सरल और शक्तिशाली दोनों के रूप में डिज़ाइन किया गया है। फ़ंक्शन का उपयोग नेटवर्क अनुरोध आरंभ करने के लिए किया जाता है और यह दो प्राथमिक तर्कों के साथ आता है:

• यूआरएल: उस संसाधन की यूआरएल स्ट्रिंग जिसे आप लाना चाहते हैं।
• विकल्प (वैकल्पिक): एक ऑब्जेक्ट जिसमें अनुरोध के लिए विभिन्न सेटिंग्स या कॉन्फ़िगरेशन होते हैं, जैसे HTTP विधि, हेडर, बॉडी सामग्री और मोड।

एक साधारण फ़ेच कॉल की संरचना
एक बुनियादी फ़ेच कॉल सीधी है और इस तरह दिखती है:

fetch(url)
  .then(response => {
    // Handle the response here
  })
  .catch(error => {
    // Handle any errors here
  });

• यूआरएल लाए जाने वाले संसाधन का पता है।
• then() विधि फ़ेच एपीआई द्वारा हल किए गए वादे को संभालती है, रिस्पांस ऑब्जेक्ट प्रदान करती है।
• कैच() विधि अनुरोध के दौरान होने वाली किसी भी त्रुटि से निपटती है।

बेसिक फ़ेच अनुरोध का उदाहरण

fetch('https://api.example.com/data')
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.error('Error:', error);
  });

यह उदाहरण दर्शाता है कि कैसे एक सरल फ़ेच अनुरोध किया जाता है, सफलता मिलने पर कंसोल पर प्रतिक्रिया लॉग की जाती है और त्रुटियों को शालीनता से नियंत्रित किया जाता है।

फ़ेच का उपयोग क्यों करें?

फ़ेच का उपयोग करने के लाभ

वादे: फ़ेच के सबसे महत्वपूर्ण लाभों में से एक इसका वादे का उपयोग है। एक्सएचआर के कॉलबैक-आधारित दृष्टिकोण की तुलना में वादे अतुल्यकालिक कार्यों को संभालने के लिए एक साफ और अधिक प्रबंधनीय तरीका प्रदान करते हैं। वादों के साथ, आप सफल प्रतिक्रियाओं को संभालने के लिए .then() तरीकों और त्रुटियों को प्रबंधित करने के लिए .catch() तरीकों को श्रृंखलाबद्ध कर सकते हैं, जिसके परिणामस्वरूप कोड अधिक पठनीय और डीबग करना आसान होता है।

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

इसके अतिरिक्त, फ़ेच एपीआई एसिंक/वेट सिंटैक्स के साथ उत्कृष्ट रूप से जुड़ता है, जिससे एसिंक्रोनस कोड और भी अधिक सरल हो जाता है।

async/प्रतीक्षा का उपयोग करने वाला उदाहरण:

async function fetchData() {
  try {
    let response = await fetch('https://api.example.com/data');
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}

क्लीनर सिंटैक्स: फ़ेच एक्सएचआर की तुलना में एक आधुनिक और कम वर्बोज़ सिंटैक्स प्रदान करता है। फ़ेच() को पास किया गया कॉन्फ़िगरेशन ऑब्जेक्ट HTTP विधि, हेडर और बॉडी सामग्री जैसे अनुरोध पैरामीटर सेट करना आसान बनाता है, जिससे कोड साफ़ और अधिक रखरखाव योग्य हो जाता है। (पूरा लेख पढ़ें

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ key: 'value' })
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

स्ट्रीम हैंडलिंग: फ़ेच प्रतिक्रिया स्ट्रीमिंग का समर्थन करता है, जो डेवलपर्स को बड़ी मात्रा में डेटा को अधिक कुशलता से संभालने की अनुमति देता है। जबकि XHR बड़ी प्रतिक्रियाओं के साथ संघर्ष कर सकता है, जिससे प्रदर्शन संबंधी समस्याएं हो सकती हैं या टुकड़ों में प्रसंस्करण के लिए अतिरिक्त हैंडलिंग की आवश्यकता हो सकती है, Fetch का रिस्पांस ऑब्जेक्ट टुकड़ों में डेटा पढ़ने के लिए .body.getReader() जैसी विधियां प्रदान करता है। यह बड़े डेटा सेट को स्ट्रीम करने और प्रबंधित करने के लिए विशेष रूप से उपयोगी है।

fetch('https://api.example.com/large-data')
  .then(response => {
    const reader = response.body.getReader();
    let decoder = new TextDecoder();
    let result = '';

    return reader.read().then(function processText({ done, value }) {
      if (done) {
        console.log('Stream finished.');
        return result;
      }
      result  = decoder.decode(value, { stream: true });
      return reader.read().then(processText);
    });
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

पूरा लेख पढ़ें- यहां क्लिक करें

निष्कर्ष
फ़ेच एपीआई ने डेवलपर्स द्वारा वेब अनुप्रयोगों में नेटवर्क अनुरोध करने के तरीके में क्रांति ला दी है। अपने स्वच्छ सिंटैक्स, प्रॉमिस के साथ सहज एकीकरण और एसिंक/वेट और स्ट्रीमिंग जैसी आधुनिक सुविधाओं के लिए समर्थन के साथ, फ़ेच HTTP अनुरोधों को संभालने के लिए एक शक्तिशाली और लचीला टूल प्रदान करता है। जैसे-जैसे वेब विकास का विकास जारी है, फ़ेच एपीआई कुशल, रखरखाव योग्य और आधुनिक वेब अनुप्रयोगों के निर्माण में एक महत्वपूर्ण घटक बना रहेगा।