Axios और Fetch में क्या अंतर है?

Question

मैं भ्रूण का उपयोग करके वेब सेवा को कॉल कर रहा हूं लेकिन वही मैं एक्सियो की मदद से कर सकता हूं। इसलिए अब मैं उलझन में हूं। मैं या तो axios या लाने के लिए जाना चाहिए?

Comments

मुझे लगता है कि इस पर एक महान विस्तार से चर्चा की गई है github.com/mzabriskie/axios/issues/314

— Jaydeep Solanki

Answer 1

फ़ेच और एक्सिओस कार्यक्षमता में बहुत समान हैं, लेकिन अधिक पश्च संगतता के लिए एक्सिस बेहतर काम करता है (उदाहरण के लिए IE 11 में काम नहीं करता है, इस पोस्ट की जाँच करें )

इसके अलावा, यदि आप JSON अनुरोधों के साथ काम करते हैं, तो निम्नलिखित कुछ मतभेद हैं जिनके साथ मैं ठोकर खाई हूं।

JSON पोस्ट अनुरोध प्राप्त करें

let url = 'https://someurl.com';
let options = {
            method: 'POST',
            mode: 'cors',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json;charset=UTF-8'
            },
            body: JSON.stringify({
                property_one: value_one,
                property_two: value_two
            })
        };
let response = await fetch(url, options);
let responseOK = response && response.ok;
if (responseOK) {
    let data = await response.json();
    // do something with data
}

Axios JSON पोस्ट अनुरोध

let url = 'https://someurl.com';
let options = {
            method: 'POST',
            url: url,
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json;charset=UTF-8'
            },
            data: {
                property_one: value_one,
                property_two: value_two
            }
        };
let response = await axios(options);
let responseOK = response && response.status === 200 && response.statusText === 'OK';
if (responseOK) {
    let data = await response.data;
    // do something with data
}

इसलिए:

• फ़ेच का शरीर = अक्षीय डेटा
• फ़ेच के शरीर को कड़ा करना पड़ता है , एक्सियोस के डेटा में ऑब्जेक्ट होता है
• फ़ेच में अनुरोध ऑब्जेक्ट में कोई url नहीं है , Axios के पास अनुरोध ऑब्जेक्ट में url है
• फ़ेच अनुरोध फ़ंक्शन में URL को पैरामीटर के रूप में शामिल किया गया है , Axios अनुरोध फ़ंक्शन में URL को पैरामीटर के रूप में शामिल नहीं किया गया है ।
• लाने का अनुरोध है ठीक है जब प्रतिक्रिया ऑब्जेक्ट शामिल ठीक संपत्ति , Axios अनुरोध है ठीक है जब स्थिति 200 है और statusText 'ठीक' है
• JSON ऑब्जेक्ट प्रतिक्रिया प्राप्त करने के लिए: लाने के लिए प्रतिक्रिया ऑब्जेक्ट पर json () फ़ंक्शन कॉल करें , Axios में प्रतिक्रिया ऑब्जेक्ट की डेटा गुण प्राप्त करें ।

उम्मीद है की यह मदद करेगा।

Comments

यहाँ अधिक सवाल है। एक बार responseOk सच है, क्या हमें प्रतिक्रिया स्थिति में स्थिति की जांच करने की आवश्यकता है। यदि यह स्थिति प्रदान की गई है? धन्यवाद

— यांग वैंग

Axios request is ok when status is 200 and statusText is 'OK' 201 या 204 जैसे 2xx रेंज में अन्य httpStatus के बारे में क्या?

— leonbloy

Answer 2

वे HTTP अनुरोध पुस्तकालय हैं ...

मैं उसी संदेह के साथ समाप्त होता हूं, लेकिन इस पोस्ट में तालिका मेरे साथ जाती है isomorphic-fetch। जो है, fetchलेकिन NodeJS के साथ काम करता है।

http://andrewhfarmer.com/ajax-libraries/

---

उपरोक्त लिंक मृत है समान तालिका यहां है: https://www.javascriptstuff.com/ajax-lbooks/

या इधर:

Comments

फिर भी मुझे अक्षतंतु पर भ्रूण का लाभ नहीं मिल पा रहा है। क्या आपके पास कोई विचार हो सकता है कि मुझे अक्षत के साथ क्यों जाना चाहिए?

— गोरख नाथ

मुझे लगता है कि एक मानक है मानक देखें fet.spec.whatwg.org ... axios में और अधिक विशेषताएं हो सकती हैं क्योंकि यह इसका पालन नहीं करता है .... मुझे लगता है कि अंत में वे मूल बातें करते हैं (ajax http अनुरोध) लेकिन यह निर्भर करता है आपको क्या चाहिए ... मुझे एक ट्रांसफॉर्मर की जरूरत नहीं थी ... इसलिए एक स्टैंडर्ड लीब एक प्रो है ...

— लुकास कात्यामा

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

— लुका फागियोली

@ Jack123 द्वारा उल्लिखित अंतर को जोड़ना भी एक बुनियादी अजाक्स कार्यक्षमता प्रदान नहीं करता है, जैसे timeout(जो बहुत अजीब है) हमें इस बुनियादी कार्यक्षमता को लागू करने के लिए एक अलग मॉड्यूल का उपयोग करना होगा।

— अपूर्वा जैन 15

@LucasKatayama लिंक टूटा हुआ प्रतीत होता है

— vancy-पैंट

Answer 3

GitHub पर mzabriskie के अनुसार :

कुल मिलाकर वे बहुत समान हैं। अक्षतंतु के कुछ लाभ:

• ट्रांसफ़ॉर्मर्स: अनुरोध किए जाने से पहले या प्रतिक्रिया प्राप्त होने के बाद डेटा पर ट्रांस्फ़ॉर्म करने की अनुमति दें

• इंटरसेप्टर: आपको अनुरोध या प्रतिक्रिया को पूरी तरह से बदलने की अनुमति देता है (साथ ही हेडर)। यह भी, अनुरोध किए जाने से पहले या प्रोमिस सेटल होने से पहले async संचालन करें

• अंतर्निहित XSRF सुरक्षा

कृपया ब्राउज़र समर्थन अक्ष की जाँच करें

मुझे लगता है कि आपको axios का उपयोग करना चाहिए।

Comments

माना। Axios भी छोटा सा आयात है, ताकि ब्लोट ज्यादा चिंता का विषय न हो - जैसा कि एक्सप्रेस या मोंगोज़ जैसी किसी चीज़ के विपरीत होता है, जहाँ अगर कोई पैकेज आकार के बारे में थोड़ा पागल है, तो वे चिंतित हो सकते हैं। :)

— कोडफिनिटी

कृपया बिना वैधता के वैध संपादन, या सामग्री की प्रतिलिपि न करें।

— जोंशरशेप

Answer 4

भ्रूण एपीआई और अक्षीय एपीआई के बीच एक और बड़ा अंतर

• सेवा कार्यकर्ता का उपयोग करते समय, आपको HTTP से अनुरोध प्राप्त करने के लिए केवल तभी API का उपयोग करना होगा
• पूर्व। सेवा कार्यकर्ता का उपयोग करते हुए PWA में कैशिंग का प्रदर्शन करते समय आप कैश नहीं कर पाएंगे यदि आप axios API का उपयोग कर रहे हैं (यह केवल भ्रूण एपीआई के साथ काम करता है)

Comments

क्या कोई यह सत्यापित कर सकता है कि क्या यह सच है? यह 1 व्यक्ति है, लेकिन 9 अपवोट्स सहमत प्रतीत होते हैं फिर भी इस पर टिप्पणियां देखना अच्छा होगा (मैं सेवा कार्यकर्ता pwa ऑफ़लाइन के साथ axios का उपयोग कर रहा हूं यही कारण है कि मैं पूछ रहा हूं।

— टॉम स्टिकेल

निश्चित रूप से, हम इस पर कुछ और टिप्पणी कर सकते हैं, लेकिन मैं axios का उपयोग करते समय कैशिंग के साथ समस्याओं का सामना कर रहा था और जब मैंने axios को भ्रूण के साथ बदल दिया () API इसका समाधान हो गया

— वैभव

यह सही प्रतीत होता है, लेकिन निकट भविष्य में तय किया जा सकता है: github.com/axios/axios/pull/2891

— arkhz

Answer 5

Axios एक स्टैंड-अलोन 3rd पार्टी पैकेज है जिसे आसानी से NPM का उपयोग करके रिएक्ट प्रोजेक्ट में स्थापित किया जा सकता है।

आपके द्वारा उल्लिखित दूसरा विकल्प है, भ्रूण का कार्य। एक्सियोस के विपरीत, fetch()अधिकांश आधुनिक ब्राउज़रों में बनाया गया है। लाने के साथ आपको थर्ड पार्टी पैकेज स्थापित करने की आवश्यकता नहीं है।

तो यह आप पर निर्भर करता है, आप के साथ जा सकते हैं fetch()और संभावित रूप से गड़बड़ कर सकते हैं यदि आप नहीं जानते कि आप क्या कर रहे हैं या सिर्फ एक्सियो का उपयोग करें जो मेरी राय में अधिक सीधा है।

Comments

फ़ॉस्च ठीक है, लेकिन एक्सियोस जैसा आपने कहा है - अधिक सीधा। जो आधुनिक ब्राउज़रों में बनाया गया है (फीचर) रिलीज के लिए वह महान नहीं है। - इसलिए मैं

— टॉम स्टिकेल

Answer 6

इसके अलावा ... मैं अपने परीक्षण में विभिन्न कामों के साथ खेल रहा था और उनके 4xx अनुरोधों के विभिन्न हैंडलिंग पर ध्यान दिया। इस मामले में मेरा परीक्षण 400 प्रतिक्रिया के साथ एक जोंस ऑब्जेक्ट देता है। इस प्रकार 3 लोकप्रिय कामों ने प्रतिक्रिया को संभाल लिया है:

// request-promise-native
const body = request({ url: url, json: true })
const res = await t.throws(body);
console.log(res.error)


// node-fetch
const body = await fetch(url)
console.log(await body.json())


// Axios
const body = axios.get(url)
const res = await t.throws(body);
console.log(res.response.data)

ब्याज की है request-promise-nativeऔर axios4xx प्रतिक्रिया पर फेंक node-fetchनहीं है, जबकि है। इसके अलावा fetchजौन पार्सिंग के लिए एक वादा का उपयोग करता है।

Comments

@ निटुन ये मेरे द्वारा चलाए जा रहे यूनिट टेस्ट हैं (जो मुझे लगता है कि मैं मोचा का उपयोग कर रहा था) अक्सर .throwsत्रुटियों को फेंकने की एक विधि होती है। इस मामले में मैं अल 3 लिबास से अस्वीकृति का परीक्षण कर रहा था और जो डेटा लौटा था उसमें अंतर देखा।

— साइबरवॉम्बट

Answer 7

अक्षतंतु के लाभ:

• ट्रांसफ़ॉर्मर्स: अनुरोध किए जाने से पहले या प्रतिक्रिया प्राप्त होने के बाद डेटा पर ट्रांसफ़ॉर्म करने की अनुमति दें
• इंटरसेप्टर: आपको अनुरोध या प्रतिक्रिया को पूरी तरह से बदलने की अनुमति देता है (साथ ही हेडर)। अनुरोध किए जाने से पहले या प्रोमिस सेटल होने से पहले async ऑपरेशंस भी करें
• अंतर्निहित XSRF सुरक्षा

के लाभ axiosसे अधिकfetch