जब आप वेब एप्लिकेशन बना रहे होते हैं, तो ऐसा समय आ सकता है जब आप किसी बाहरी संसाधन तक पहुंचने के लिए HTTP अनुरोध करना चाहें। उदाहरण के लिए, मान लीजिए आप एक ब्लॉग बना रहे हैं। आप प्रत्येक ब्लॉग पोस्ट पर दिखाने के लिए कमेंट्स की सूची पुनर्प्राप्त करने के लिए API को कॉल करना चाह सकते हैं।
Axios एक लोकप्रिय जावास्क्रिप्ट लाइब्रेरी है जिसका उपयोग वेब अनुरोध करने के लिए किया जा सकता है। इस गाइड में, हम बताएंगे कि GET अनुरोध करने के लिए axios का उपयोग कैसे करें। हम यह दिखाने के लिए कुछ उदाहरणों के माध्यम से चलेंगे कि axios कैसे काम करता है और आप इसे अपने कोड में कैसे उपयोग कर सकते हैं।
Axios क्यों?
Axios एक प्रॉमिस-बेस्ड लाइब्रेरी है जो वेब अनुरोध करना आसान बनाती है।
आप सोच रहे होंगे: मुझे अन्य कई वेब अनुरोध लाइब्रेरीज़ में से axios का उपयोग क्यों करना चाहिए? यह सच है कि fetch जैसी अन्य लाइब्रेरीज़ हैं जिनका उपयोग आप GET अनुरोध करने के लिए कर सकते हैं, लेकिन axios के कई फायदे हैं जो इन लाइब्रेरीज़ में नहीं हैं।
Axios पुराने ब्राउज़र्स का समर्थन करता है, जो आपको अधिक सुलभ उपयोगकर्ता अनुभव बनाने की अनुमति देगा। Axios बिल्ट-इन CSRF सुरक्षा के साथ आता है ताकि कमजोरियों को रोका जा सके। यह Node.js में भी काम करता है, जो इसे बहुत अच्छा बनाता है यदि आप फ्रंट-एंड और बैक-एंड दोनों वेब एप्लिकेशन विकसित कर रहे हैं।
Axios कैसे इंस्टॉल करें
इससे पहले कि आप axios का उपयोग करके GET अनुरोध करें, आपको लाइब्रेरी इंस्टॉल करनी होगी। आप निम्न कमांड का उपयोग करके ऐसा कर सकते हैं:
npm install axios --save
यह कमांड axios इंस्टॉल करेगा और इसे आपकी स्थानीय package.json फाइल में सहेज देगा। अब आप axios लाइब्रेरी का उपयोग शुरू करने के लिए तैयार हैं।
Axios का उपयोग करके अनुरोध कैसे करें
Axios के साथ शुरुआत करना सरल है। वेब अनुरोध करने के लिए, आपको केवल उस URL को निर्दिष्ट करना होगा जिससे आप डेटा अनुरोध करना चाहते हैं और वह मेथड जिसका आप उपयोग करना चाहते हैं।
मान लीजिए आप cat-facts API से बिल्लियों के बारे में यादृच्छिक तथ्यों की सूची पुनर्प्राप्त करना चाहते हैं। हम निम्न कोड का उपयोग करके ऐसा कर सकते हैं:
axios ({ url: "https://cat-fact.herokuapp.com/facts", method: "GET" )}
यह कोड एक प्रॉमिस लौटाता है जो अभी तक पूर्ण नहीं हुए अनुरोध को दर्शाता है। इस HTTP अनुरोध से डेटा पुनर्प्राप्त करने के लिए, आप async/await फंक्शन का उपयोग करेंगे:
const axios = require("axios"); async function getCatFacts() { const response = await axios ({ url: "https://cat-fact.herokuapp.com/facts", method: "GET" }) console.log(response.data) } getCatFacts()
सर्वर ने बिल्ली तथ्यों की सूची के साथ प्रतिक्रिया दी।
जब हम इस फंक्शन को कॉल करते हैं, तो cat-facts API पर HTTP GET अनुरोध किया जाता है। हम async/await फंक्शन का उपयोग करते हैं ताकि हमारा प्रोग्राम तब तक जारी न रहे जब तक वेब अनुरोध पूरा नहीं हो जाता। ऐसा इसलिए है क्योंकि axios पहले प्रॉमिस लौटाता है। यह अनुरोध पूरा होने के बाद अनुरोध से डेटा लौटाता है।
axios लाइब्रेरी कुछ शॉर्टकट कमांड्स के साथ आती है जिनका उपयोग आप वेब अनुरोध करने के लिए कर सकते हैं:
- axios.get()
- axios.post()
- axios.delete()
- axios.put()
- axios.patch()
- axios.options()
इस ट्यूटोरियल में, हम axios.get() और axios.post() मेथड्स पर ध्यान केंद्रित करने जा रहे हैं, जो अन्य सभी शॉर्टकट मेथड्स के समान बेसिक सिंटैक्स का उपयोग करते हैं।
axios का उपयोग करके GET अनुरोध करना
हमारे पिछले उदाहरण में, हमने GET अनुरोध करने के लिए axios का उपयोग किया। लेकिन, axios के साथ GET अनुरोध करने का एक सरल तरीका है: axios.get() का उपयोग करके।
मान लीजिए आप बिल्ली तथ्यों की सूची पुनर्प्राप्त करना चाहते हैं, फिर गिनें कि कितने लौटाए गए हैं। आप निम्न कोड का उपयोग करके ऐसा कर सकते हैं:
const axios = require("axios"); async function getCatFacts() { const response = await axios.get("https://cat-fact.herokuapp.com/facts") console.log(`{response.data.all.length} cat facts were returned.`) } getCatFacts()
कोड ने यह प्रतिक्रिया उत्पन्न की: 225 cat facts were returned.
आइए हमारे कोड को तोड़ते हैं। हमने पहले getCatFacts() नामक async फंक्शन घोषित किया जिसमें हम वेब अनुरोध करते हैं।
फिर हम cat-facts API से बिल्ली तथ्यों की सूची पुनर्प्राप्त करने के लिए axios.get() का उपयोग करते हैं; "response.data" हमारे अनुरोध से प्रतिक्रिया ऑब्जेक्ट्स और अनुरोध बॉडी को रखता है।
अंत में, हम .length एट्रिब्यूट का उपयोग करके गणना करते हैं कि हमारे अनुरोध से कितने बिल्ली तथ्य लौटाए गए हैं। फिर हम इस संख्या को "cat facts were returned" स्ट्रिंग में जोड़ते हैं।
axios का उपयोग करके हेडर्स भेजना
जब आप GET अनुरोध कर रहे होते हैं, तो आपको उस वेब संसाध पर कस्टम हेडर भेजने की आवश्यकता हो सकती है जिस पर आप अनुरोध कर रहे हैं। मान लीजिए आप ऐसे API से डेटा पुनर्प्राप्त कर रहे हैं जिसे प्रमाणीकरण की आवश्यकता है। आपको प्रमाणीकरण हेडर निर्दिष्ट करने की आवश्यकता हो सकती है।
axios अनुरोध के साथ हेडर निर्दिष्ट करने के लिए, आप निम्न कोड का उपयोग कर सकते हैं:
axios.get("https://urlhere.com", { headers: { "header-name": "header-value" } })
यह कोड हमारे द्वारा निर्दिष्ट URL पर "header-name" हेडर को "header-value" मान के साथ भेजेगा।
axios का उपयोग करके पैरामीटर्स भेजना
कई API आपको GET अनुरोध में पैरामीटर्स भेजने की अनुमति देते हैं। उदाहरण के लिए, एक API आपको limit पैरामीटर का उपयोग करके कितनी प्रतिक्रियाएं लौटाई जाती हैं, इसे सीमित करने की अनुमति दे सकता है।
वेब अनुरोध के साथ भेजने के लिए पैरामीटर निर्दिष्ट करना axios का उपयोग करके आसान है। आप या तो पैरामीटर को क्वेरी स्ट्रिंग के रूप में शामिल कर सकते हैं, या params प्रॉपर्टी का उपयोग कर सकते हैं। यहां axios का उपयोग करके क्वेरी स्ट्रिंग्स का उपयोग करके पैरामीटर निर्दिष्ट करने का उदाहरण है:
axios;get("https://urlhere.com/?date=2020-05-15")
वैकल्पिक रूप से, आप axios विकल्पों में params प्रॉपर्टी निर्दिष्ट कर सकते हैं इस कोड का उपयोग करके:
axios;get("https://urlhere.com/?date=2020-05-15", { params: { date: "2020-05-15" } })
ये दोनों उदाहरण निर्दिष्ट URL पर "date" नाम और "2020-05-15" मान के साथ पैरामीटर भेजते हैं।
axios का उपयोग करके POST अनुरोध कैसे करें
POST अनुरोध करने का सिंटैक्स GET अनुरोध करने के समान है। अंतर यह है कि आपको axios.get() के बजाय axios.post() मेथड का उपयोग करना चाहिए।
मान लीजिए आप API पर पोस्ट अनुरोध करना चाहते हैं। आप निम्न कोड का उपयोग करके ऐसा कर सकते हैं:
axios.post("https://urlhere.com")
आप हेडर्स और पैरामीटर्स को उसी तरह निर्दिष्ट कर सकते हैं जैसे आप GET अनुरोध करने के लिए करेंगे। मान लीजिए आप अपने POST अनुरोध के साथ "Name" हेडर को "James" मान के साथ भेजना चाहते हैं। आप निम्न कोड का उपयोग करके ऐसा कर सकते हैं:
axios.post("https://urlhere.com", { headers: { "Name": "James" } })
निष्कर्ष
axios लाइब्रेरी का उपयोग जावास्क्रिप्ट में वेब अनुरोध करने के लिए किया जाता है। इसका उपयोग फ्रंट-एंड पर जावास्क्रिप्ट का उपयोग करके या Node.js जैसे प्लेटफॉर्म का उपयोग करके बैक-एंड पर किया जा सकता है। अन्य वेब अनुरोध लाइब्रेरीज़ के विपरीत, axios में बिल्ट-इन CSRF सुरक्षा है, पुराने ब्राउज़र्स का समर्थन करता है और प्रॉमिस संरचना का उपयोग करता है। यह वेब अनुरोध करने के लिए एकदम सही है।
अब आप एक पेशेवर वेब डेवलपर की तरह axios का उपयोग करके GET और POST अनुरोध करना शुरू करने के लिए तैयार हैं।
