Axios या Fetch: 2019 में क्या उपयोग करना है?

Axios एक प्रसिद्ध जावास्क्रिप्ट लाइब्रेरी है। यह ब्राउज़रों और Node.js. के लिए एक HTTP आधारित वादा है। यदि आप पिछले कुछ वर्षों में जावास्क्रिप्ट प्रोग्रामर के रूप में काम कर रहे हैं, तो आप निश्चित रूप से, इस पुस्तकालय का उपयोग करते हैं। अक्टूबर 2019 में, 25 मिलियन बार npm से Axios पैकेज डाउनलोड किया गया था। ऐसा लगता है कि एक्सियोस का भविष्य बादल रहित है। लेकिन क्या होगा अगर मैं आपको बताता हूं कि एक्सियो एक मृत परियोजना है। यह वही है जो रेडिट पर एक चर्चा के बारे में था। अर्थात्, हम निम्नलिखित के बारे में बात कर रहे हैं:

• Axios GitHub रिपॉजिटरी में डेवलपर गतिविधि का स्तर बहुत कम है।
• समस्याओं और पीआर की अनदेखी की जाती है।
• विकास दल चुप है।

स्थिति व्यापक रूप से चर्चित भेद्यता से बढ़ी है। यह भेद्यता 2017 में बताई गई थी। परियोजना के लेखकों ने उसे दो साल से अधिक समय तक नजरअंदाज किया।

जब Axios लाइब्रेरी लोकप्रिय हो गई, तो ब्राउज़रों के पास एक एपीआई नहीं था जो एक वादा-आधारित HTTP क्लाइंट को लागू करता है। मानक XML HTTP अनुरोध (XHR) इंटरफ़ेस असुविधाजनक था, इसके साथ काम करना कठिन था। डेवलपर्स ने इस तथ्य के कारण एक्सिस को सहर्ष स्वीकार कर लिया कि इस पुस्तकालय ने उनके जीवन को आसान बना दिया।



Fetch API 2015 में जारी किया गया था। हम 2019 में अभी भी Axios का उपयोग क्यों कर रहे हैं? आइए इन दोनों तकनीकों की तुलना करें।

टेम्पलेट कोड वॉल्यूम

▍Fetch

fetch('https://jsonplaceholder.typicode.com/todos/1')   .then(response => response.json())   .then(json => console.log(json)) // { //  "userId": 1, //  "id": 1, //  "title": "delectus aut autem", //  "completed": false // } 

▍Axios

 axios.get("https://jsonplaceholder.typicode.com/todos/1")  .then(response => console.log("response", response.data)) // { //  "userId": 1, //  "id": 1, //  "title": "delectus aut autem", //  "completed": false // } 

Fetch का उपयोग करते समय, आपको दो वादों से निपटना होगा। लेकिन जब एक्सियोस के साथ काम करते हैं, तो हमारे पास प्रतिक्रिया ऑब्जेक्ट के data गुण में JSON परिणाम तक सीधे पहुंच होती है।

बॉडी मिक्सिन json() विधि एक रिस्पांस स्ट्रीम लेता है और इसे पूरी तरह से पढ़ता है। यह एक वादा देता है जो अनुरोध के मुख्य पाठ को पार्स करने के JSON परिणाम द्वारा हल किया जाता है।

पोस्ट अनुरोधों के साथ काम करते समय आपको Fetch में और भी अधिक बॉयलरप्लेट कोड का उपयोग करना होगा।

▍Fetch

 fetch("https://jsonplaceholder.typicode.com/posts", {  method: "POST",  body: JSON.stringify({    title: "Title of post",    body: "Post Body"  }) })  .then(res => {    if (!response.ok) throw Error(response.statusText);    return response.json();  })  .then(data => console.log(data))  .catch(error => console.log(error)); 

▍Axios

 axios  .post("https://jsonplaceholder.typicode.com/posts", {    title: "Title of post",    body: "Body of post"  })  .then(response => console.log(response.data))  .catch(error => console.log(error)); 

Axios का उपयोग करके बड़ी मात्रा में बॉयलरप्लेट कोड लिखने से बचा जाता है और कोड को क्लीनर और स्पष्ट बनाता है।

हैंडलिंग में त्रुटि

▍Fetch

 fetch("https://jsonplaceholder.typicode.com/todos/100000")  .then(response => {    if (!response.ok) throw Error(response.statusText);    return response.json();  })  .then(data => console.log("data", data))  .catch(error => {    console.log("error", error);  }); // error Error: Not Found 

▍Axios

 axios  .get("https://jsonplaceholder.typicode.com/todos/100000")  .then(response => {    console.log("response", response);  })  .catch(error => {    console.log("error", error);  }); // error Error: Not Found 

Axios लाइब्रेरी नेटवर्क त्रुटियों की रिपोर्ट करता है, लेकिन Fetch API नहीं करता है। Fetch के साथ काम करते समय, आपको हमेशा response.ok प्रॉपर्टी की जांच करनी होगी। इस समस्या के समाधान को सरल बनाने के लिए, इस त्रुटि की जाँच एक अलग कार्य के रूप में जारी की जा सकती है:

 const checkForError = response => {  if (!response.ok) throw Error(response.statusText);  return response.json(); }; fetch("https://jsonplaceholder.typicode.com/todos/100000")  .then(checkForError)  .then(data => console.log("data", data))  .catch(error => {    console.log("error", error);  }); 

गुम सुविधाएँ

Axios डेटा अपलोड की प्रगति की निगरानी कर सकते हैं। लश इसका समर्थन नहीं करता है। यह उन लोगों के लिए प्रौद्योगिकी की पसंद में एक निर्णायक कारक हो सकता है जो एक एप्लिकेशन विकसित कर रहे हैं जो उपयोगकर्ताओं को सर्वर पर फ़ोटो या वीडियो फ़ाइलों को अपलोड करने की अनुमति देता है।

 const config = {  onUploadProgress: event => console.log(event.loaded) }; axios.put("/api", data, config); 

वैकल्पिक पुस्तकालय

यहां Axios और Fetch API के कुछ विकल्प दिए गए हैं:

• Ky एक छोटा और स्मार्ट HTTP क्लाइंट है जो window.fetch पर आधारित है।
• Superagent XMLHttpRequest पर आधारित एक छोटा प्रगतिशील HTTP क्लाइंट लाइब्रेरी है।

परिणाम

2019 में मुझे क्या उपयोग करना चाहिए? यह बहुत कुछ पर निर्भर करता है। उदाहरण के लिए, यदि आपको किसी सर्वर पर सामग्री अपलोड करने की प्रगति को ट्रैक करने की आवश्यकता है, तो आपके लिए Axios या Superagent सबसे अच्छा है। यदि आप Fetch की सीमाओं को संभाल सकते हैं, तो आप इस API का बेहतर उपयोग करेंगे। और Fetch code को थोड़ा सुधारने के लिए, Ky जैसी रैपर लाइब्रेरी आज़माएं।

प्रिय पाठकों! आप अपनी परियोजनाओं में HTTP क्लाइंट का क्या उपयोग करते हैं?