पुर्तगाली संस्करण

एक्सियोस और फ़ेच जावास्क्रिप्ट में HTTP अनुरोध करने के लिए लोकप्रिय उपकरण हैं, लेकिन उनमें कुछ महत्वपूर्ण अंतर हैं। यहाँ एक सारांश है:

एक्सियोस

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

लाना

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

मामलों का प्रयोग करें

• यदि आपको विशेष रूप से जटिल अनुप्रयोगों के लिए आउट-ऑफ़-द-बॉक्स सुविधाओं के एक समृद्ध सेट की आवश्यकता है, तो Axios का उपयोग करें।
• सरल उपयोग के मामलों के लिए या जब आप बाहरी निर्भरता से बचना चाहते हैं तो Fetch का उपयोग करें।

उपयोग उदाहरण

एक्सियोस:

axios.get('/api/data')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

const options = {
  url: 'http://localhost/test.htm',
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json;charset=UTF-8'
  },
  data: {
    a: 10,
    b: 20
  }
};
axios(options)
  .then(response => {
    console.log(response.status);
  });

लाना:

fetch('/api/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error(error));

const url = "https://jsonplaceholder.typicode.com/todos";
const options = {
  method: "POST",
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json;charset=UTF-8",
  },
  body: JSON.stringify({
    a: 10,
    b: 20,
  }),
};
fetch(url, options)
  .then((response) => response.json())
  .then((data) => {
    console.log(data);
  });

टिप्पणियाँ:

• डेटा भेजने के लिए, फ़ेच() POST अनुरोध के लिए बॉडी प्रॉपर्टी का उपयोग करता है, जबकि एक्सियोस डेटा प्रॉपर्टी का उपयोग करता है।
• Fetch() में डेटा को JSON.stringify विधि का उपयोग करके एक स्ट्रिंग में बदल दिया जाता है।
• Axios स्वचालित रूप से सर्वर से लौटाए गए डेटा को बदल देता है, लेकिन फ़ेच() के साथ, आपको डेटा को जावास्क्रिप्ट ऑब्जेक्ट में पार्स करने के लिए प्रतिक्रिया.json() विधि को कॉल करने की आवश्यकता होती है।
• एक्सियोस के साथ, सर्वर द्वारा प्रदान की गई डेटा प्रतिक्रिया को डेटा ऑब्जेक्ट के भीतर एक्सेस किया जा सकता है, जबकि फ़ेच() विधि में, अंतिम डेटा को किसी भी वेरिएबल के साथ नामित किया जा सकता है।

निष्कर्ष

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

एक्सियोस एक उपयोगकर्ता-अनुकूल एपीआई प्रदान करता है जो अधिकांश HTTP संचार कार्यों को सरल बनाता है। हालाँकि, यदि आप मूल ब्राउज़र सुविधाओं का उपयोग करना पसंद करते हैं, तो आप निश्चित रूप से Fetch API के साथ स्वयं समान कार्यक्षमता लागू कर सकते हैं।

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

अधिक जानकारी के लिए: https://medium.com/trainingcenter/axios-ou-fetch-765e5db9dd59