"यदि कोई कर्मचारी अपना काम अच्छी तरह से करना चाहता है, तो उसे पहले अपने औजारों को तेज करना होगा।" - कन्फ्यूशियस, "द एनालेक्ट्स ऑफ कन्फ्यूशियस। लू लिंगगोंग"
मुखपृष्ठ > प्रोग्रामिंग > जावास्क्रिप्ट में एक्सियोस और फ़ेच के बीच अंतर

जावास्क्रिप्ट में एक्सियोस और फ़ेच के बीच अंतर

2024-11-01 को प्रकाशित
ब्राउज़ करें:916

Difference Between Axios & Fetch in Javascript

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

1. उपयोग में आसानी:

  • एक्सियोस:

    एक्सिओस अनुरोध करना और प्रतिक्रियाओं को संभालना सरल बनाता है। यह स्वचालित रूप से JSON प्रतिक्रियाओं को पार्स करता है, जिससे इसके साथ काम करना आसान हो जाता है।

     axios.get('/api/user')
       .then(response => console.log(response.data))
       .catch(error => console.error(error));
    
  • लाना:

    फ़ेच के साथ, आपको JSON पार्सिंग को स्पष्ट रूप से संभालने की आवश्यकता है, जो एक अतिरिक्त चरण जोड़ता है।

     fetch('/api/user')
       .then(response => response.json())
       .then(data => console.log(data))
       .catch(error => console.error(error));
    

2. प्रतिक्रिया प्रबंधन:

  • एक्सियोस: Axios स्वचालित रूप से प्रतिक्रिया का समाधान करता है और यदि प्रतिक्रिया स्थिति 2xx की सीमा से बाहर है तो एक त्रुटि उत्पन्न करता है, ताकि आप सीधे .catch() ब्लॉक में त्रुटियों को संभाल सकें।
  • लाना:

    फ़ेच के साथ, गैर-2xx स्थिति कोड (जैसे 404 या 500) को त्रुटियों के रूप में नहीं माना जाता है। आपको प्रतिक्रिया स्थिति को मैन्युअल रूप से जांचना होगा और यदि आवश्यक हो तो एक त्रुटि डालनी होगी।

     fetch('/api/user')
       .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));
    

3. अनुरोध और प्रतिक्रिया अवरोधन:

  • एक्सियोस:

    एक्सियोस अंतर्निहित इंटरसेप्टर प्रदान करता है, जो आपको अनुरोधों को संशोधित करने या विश्व स्तर पर प्रतिक्रियाओं को संभालने की अनुमति देता है, जो प्रमाणीकरण टोकन, लॉगिंग आदि जोड़ने के लिए उपयोगी हो सकता है।

     axios.interceptors.request.use(config => {
       config.headers['Authorization'] = 'Bearer token';
       return config;
     });
    
  • लाना:

    फ़ेच में अंतर्निहित इंटरसेप्टर नहीं हैं, इसलिए यदि आपको इस व्यवहार की आवश्यकता है तो आपको फ़ेच कॉल को कस्टम फ़ंक्शन में मैन्युअल रूप से लपेटना होगा।

4. ब्राउज़र संगतता:

  • एक्सियोस: Axios पुराने ब्राउज़र (IE 11 और पहले) पर काम करता है और आंतरिक रूप से पॉलीफ़िल को संभालता है।
  • लाना: फ़ेच एपीआई इंटरनेट एक्सप्लोरर में समर्थित नहीं है। पुराने ब्राउज़र में इसका समर्थन करने के लिए आपको व्हाट्सएप-फ़ेच जैसे पॉलीफ़िल की आवश्यकता हो सकती है।

5. डेटा हैंडलिंग:

  • एक्सियोस:

    POST अनुरोध करते समय Axios स्वचालित रूप से डेटा को स्ट्रिंग करता है और सामग्री-प्रकार को एप्लिकेशन/json पर सेट करता है। यह फॉर्मडेटा जैसे अन्य प्रारूपों में भी आसानी से डेटा भेजने का समर्थन करता है।

     axios.post('/api/user', { name: 'John' });
    
  • लाना:

    फ़ेच में, आपको डेटा को मैन्युअल रूप से स्ट्रिंग करना होगा और POST अनुरोधों के लिए हेडर सेट करना होगा।

     fetch('/api/user', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ name: 'John' })
     });
    

6. अनुरोध रद्द करना:

  • एक्सियोस:

    CancelToken का उपयोग करके अनुरोधों को रद्द करने के लिए Axios में अंतर्निहित समर्थन है।

     const source = axios.CancelToken.source();
     axios.get('/api/user', { cancelToken: source.token });
     source.cancel('Request canceled.');
    
  • लाना:

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

     const controller = new AbortController();
     fetch('/api/user', { signal: controller.signal });
     controller.abort();
    

7. त्रुटि प्रबंधन:

  • एक्सियोस: Axios स्वचालित रूप से गैर-2xx प्रतिक्रियाओं के लिए त्रुटियाँ फेंकता है, और त्रुटि प्रबंधन अधिक सुसंगत और केंद्रीकृत है।
  • लाना: फ़ेच को अधिक मैन्युअल त्रुटि प्रबंधन की आवश्यकता होती है, क्योंकि यह केवल नेटवर्क त्रुटियों के वादे को अस्वीकार करेगा, HTTP त्रुटि स्थिति कोड के लिए नहीं।

निष्कर्ष:

  • Axios अधिक सुविधा संपन्न है, उपयोग में आसान है, और अनुरोधों को संभालने के लिए बेहतर अमूर्तता प्रदान करता है।
  • Fetch एक आधुनिक, देशी एपीआई है जिसके लिए कम निर्भरता की आवश्यकता होती है लेकिन त्रुटियों, इंटरसेप्टर और डेटा हैंडलिंग जैसी कुछ सुविधाओं को संभालने के लिए अधिक मैन्युअल काम की आवश्यकता होती है।

यदि आप अपने अनुरोधों पर अधिक नियंत्रण चाहते हैं, तो आप फ़ेच पर टिके रह सकते हैं। यदि आप कुछ ऐसा चाहते हैं जो HTTP अनुरोधों को सरल बना दे, तो axios बेहतर विकल्प होगा।

विज्ञप्ति वक्तव्य इस लेख को पुन: प्रस्तुत किया गया है: https://dev.to/pulkitgovrani/difference-between-axios-fetch-in-javascript-25od?1 यदि कोई उल्लंघन है, तो कृपया इसे हटाने के लिए [email protected] पर संपर्क करें।
नवीनतम ट्यूटोरियल अधिक>

चीनी भाषा का अध्ययन करें

अस्वीकरण: उपलब्ध कराए गए सभी संसाधन आंशिक रूप से इंटरनेट से हैं। यदि आपके कॉपीराइट या अन्य अधिकारों और हितों का कोई उल्लंघन होता है, तो कृपया विस्तृत कारण बताएं और कॉपीराइट या अधिकारों और हितों का प्रमाण प्रदान करें और फिर इसे ईमेल पर भेजें: [email protected] हम इसे आपके लिए यथाशीघ्र संभालेंगे।

Copyright© 2022 湘ICP备2022001581号-3