Axios GET और POST अनुरोध कैसे करें

जब आप एक वेब एप्लिकेशन बना रहे होते हैं, तो ऐसा समय आ सकता है जब आप बाहरी संसाधन तक पहुंचने के लिए HTTP अनुरोध करना चाहते हैं। उदाहरण के लिए, मान लीजिए कि आप एक ब्लॉग बना रहे हैं। आप प्रत्येक ब्लॉग पोस्ट पर दिखाने के लिए टिप्पणियों की सूची प्राप्त करने के लिए एपीआई को कॉल करना चाह सकते हैं।

Axios एक लोकप्रिय JavaScript लाइब्रेरी है जिसका उपयोग आप वेब अनुरोध करने के लिए कर सकते हैं। इस गाइड में, हम बताएंगे कि GET अनुरोध करने के लिए axios का उपयोग कैसे करें। Axios कैसे काम करता है और आप इसे अपने कोड में कैसे उपयोग कर सकते हैं, यह दिखाने के लिए हम कुछ उदाहरणों के माध्यम से चलेंगे।

Axios क्यों?

Axios एक वादा-आधारित पुस्तकालय है जो वेब अनुरोध करना आसान बनाता है।

आप सोच रहे होंगे:मुझे कई अन्य वेब अनुरोध पुस्तकालयों में से एक पर अक्षतंतु का उपयोग क्यों करना चाहिए? यह सच है कि फ़ेच जैसी अन्य लाइब्रेरी भी हैं जिनका उपयोग आप GET अनुरोध करने के लिए कर सकते हैं, लेकिन axios के कई फायदे हैं जो इन पुस्तकालयों में नहीं हैं।

Axios पुराने ब्राउज़रों का समर्थन करता है, जो आपको अधिक सुलभ उपयोगकर्ता अनुभव बनाने की अनुमति देगा। कमजोरियों को रोकने के लिए Axios भी अंतर्निहित CSRF सुरक्षा के साथ आता है। यह Node.js में भी काम करता है, जिससे अगर आप फ्रंट-एंड या बैक-एंड दोनों वेब एप्लिकेशन विकसित कर रहे हैं तो यह बहुत अच्छा है।

Axios कैसे स्थापित करें

इससे पहले कि आप axios का उपयोग करके GET अनुरोध करें, आपको लाइब्रेरी स्थापित करनी होगी। आप निम्न आदेश का उपयोग करके ऐसा कर सकते हैं:

npm install axios --save

यह आदेश axios स्थापित करेगा और इसे आपके स्थानीय package.json फ़ाइल में सहेजेगा। अब आप axios लाइब्रेरी का उपयोग शुरू करने के लिए तैयार हैं।

Axios का उपयोग करके अनुरोध कैसे करें

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

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।

बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।

मान लीजिए कि आप बिल्ली-तथ्य एपीआई से बिल्लियों के बारे में यादृच्छिक तथ्यों की एक सूची प्राप्त करना चाहते हैं। हम इस कोड का उपयोग करके ऐसा कर सकते हैं:

axios ({
	url: "https://cat-fact.herokuapp.com/facts",
	method: "GET"
)}

यह कोड एक वादा देता है जो एक अनुरोध का प्रतिनिधित्व करता है जो अभी तक पूरा नहीं हुआ है। इस HTTP अनुरोध से डेटा पुनर्प्राप्त करने के लिए, आप इस तरह एक async/प्रतीक्षा फ़ंक्शन का उपयोग करेंगे:

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()

सर्वर ने बिल्ली तथ्यों की सूची के साथ प्रतिक्रिया दी।

जब हम इस फ़ंक्शन को कॉल करते हैं, तो कैट-फैक्ट्स एपीआई के लिए एक HTTP GET अनुरोध किया जाता है। हम एक async/प्रतीक्षा फ़ंक्शन का उपयोग करते हैं, इसलिए हमारा प्रोग्राम तब तक जारी नहीं रहता जब तक वेब अनुरोध पूरा नहीं हो जाता। ऐसा इसलिए है क्योंकि axios पहले एक वादा लौटाता है। यह उस अनुरोध से डेटा लौटाता है जो उस अनुरोध के पूरा होने के बाद करता है।

Axios लाइब्रेरी कुछ शॉर्टहैंड कमांड के साथ आती है जिनका उपयोग आप वेब अनुरोध करने के लिए कर सकते हैं:

• axios.get()
• axios.post()
• axios.delete()
• axios.put()
• axios.patch()
• axios.options()

इस ट्यूटोरियल में, हम axios.get() . पर ध्यान केंद्रित करने जा रहे हैं और axios.post() विधियाँ, जो अन्य सभी आशुलिपि विधियों के समान मूल सिंटैक्स का उपयोग करती हैं।

अक्षीय का उपयोग करके 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 बिल्ली तथ्यों को वापस कर दिया गया।

आइए हमारे कोड को तोड़ दें। हमने सबसे पहले getCatFacts() . नामक एक एसिंक फ़ंक्शन घोषित किया है जिसमें हम एक वेब अनुरोध करते हैं।

फिर हम axios.get() . का उपयोग करते हैं बिल्ली तथ्य एपीआई से बिल्ली तथ्यों की एक सूची प्राप्त करने के लिए; "response.data" हमारे अनुरोध से प्रतिक्रिया वस्तुओं और अनुरोध निकाय रखता है।

अंत में, हम गणना करने के लिए .length विशेषता का उपयोग करते हैं कि हमारे अनुरोध से कितने बिल्ली तथ्य लौटाए गए हैं। फिर हम इस संख्या को "बिल्ली के तथ्य वापस कर दिए गए" स्ट्रिंग में जोड़ते हैं।

अक्षीय का उपयोग करके शीर्षलेख भेजना

जब आप GET अनुरोध कर रहे हों, तो आपको उस वेब संसाधन को एक कस्टम हेडर भेजने की आवश्यकता हो सकती है, जिसके लिए आप अनुरोध कर रहे हैं। मान लीजिए कि आप एक एपीआई से डेटा पुनर्प्राप्त कर रहे हैं जिसके लिए प्रमाणीकरण की आवश्यकता है। आपको प्रमाणीकरण शीर्षलेख निर्दिष्ट करने की आवश्यकता हो सकती है।

एक अक्षीय अनुरोध के साथ एक शीर्षलेख निर्दिष्ट करने के लिए, आप निम्न कोड का उपयोग कर सकते हैं:

axios.get("https://urlhere.com", {
	headers: { "header-name": "header-value" }
})

यह कोड हमारे द्वारा निर्दिष्ट URL पर "हेडर-वैल्यू" मान के साथ "हेडर-नाम" हेडर भेज देगा।

अक्षीय का उपयोग करके पैरामीटर भेजना

कई API आपको GET अनुरोध में पैरामीटर भेजने की अनुमति देते हैं। उदाहरण के लिए, एक एपीआई आपको यह सीमित करने की अनुमति दे सकता है कि एक सीमा पैरामीटर का उपयोग करके कितनी प्रतिक्रियाएं दी जाती हैं।

वेब अनुरोध के साथ भेजने के लिए पैरामीटर निर्दिष्ट करना 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 पर "तारीख" नाम और मान "2020-05-15" के साथ एक पैरामीटर भेजते हैं।

अक्षीय का उपयोग करके POST अनुरोध कैसे करें

POST अनुरोध करने का सिंटैक्स GET अनुरोध करने जैसा ही है। अंतर यह है कि आपको axios.post() . का उपयोग करना चाहिए axios.get() . के बजाय विधि .

मान लीजिए कि आप एक एपीआई के लिए एक पोस्ट अनुरोध करना चाहते हैं। आप इस कोड का उपयोग करके ऐसा कर सकते हैं:

axios.post("https://urlhere.com")

आप हेडर और पैरामीटर को उसी तरह निर्दिष्ट करने में सक्षम हैं जैसे आप GET अनुरोध करना चाहते हैं। मान लें कि आप अपने POST अनुरोध के साथ "जेम्स" मान के साथ हेडर "नाम" भेजना चाहते हैं। आप इस कोड का उपयोग करके ऐसा कर सकते हैं:

axios.post("https://urlhere.com", {
	headers: { "Name": "James" }
})

निष्कर्ष

जावास्क्रिप्ट में वेब अनुरोध करने के लिए axios लाइब्रेरी का उपयोग किया जाता है। इसका उपयोग जावास्क्रिप्ट का उपयोग करके फ्रंट-एंड दोनों पर या Node.js जैसे प्लेटफॉर्म का उपयोग करके बैक-एंड पर किया जा सकता है। अन्य वेब अनुरोध पुस्तकालयों के विपरीत, axios में अंतर्निहित CSRF सुरक्षा है, पुराने ब्राउज़रों का समर्थन करता है और एक वादा संरचना का उपयोग करता है। यह वेब अनुरोध करने के लिए एकदम सही है।

अब आप पेशेवर वेब डेवलपर की तरह axios का उपयोग करके GET और POST अनुरोध करना शुरू करने के लिए तैयार हैं।