जावास्क्रिप्ट में पोस्ट अनुरोध कैसे करें

| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |

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

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

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

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

यह कमांड Axios को इंस्टाल करेगा और लोकल package.json फाइल में सेव करेगा। अब आप Axios लाइब्रेरी का उपयोग शुरू करने के लिए तैयार हैं।

Axios सहायता के लिए आवेदन कैसे करें

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

मान लीजिए कि हम चैट -तथ्यों हम इसे इस कोड का उपयोग करके कर सकते हैं:.

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

wi सर्वर ने चैट तथ्यों की एक सूची के साथ जवाब दिया।

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

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

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

>

फिर हम axios.get का उपयोग करते हैं ( ) चैट-तथ्य API से चैट तथ्यों की सूची प्राप्त करने के लिए; "Response.data" में हमारे अनुरोध से प्रतिक्रिया ऑब्जेक्ट और अनुरोध का मुख्य भाग होता है।

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

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

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

<. P> Axios अनुरोध के साथ हेडर निर्दिष्ट करने के लिए, आप निम्न कोड का उपयोग कर सकते हैं:

यह कोड `हेडर` हेडर-नाम भेजेगा " हमारे द्वारा निर्दिष्ट url में "हेडर मान" के साथ।

Axios का उपयोग करके पैरामीटर भेजें

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

एक्सियोस का उपयोग करके वेब अनुरोध के साथ भेजने के लिए एक पैरामीटर निर्दिष्ट करना आसान है। आप पैरामीटर को क्वेरी स्ट्रिंग के रूप में शामिल कर सकते हैं या params प्रॉपर्टी का उपयोग कर सकते हैं। पैरामीटर निर्दिष्ट करने के लिए क्वेरी स्ट्रिंग्स का उपयोग करके वेब अनुरोध करने वाले Axios का एक उदाहरण यहां दिया गया है:

आप इस कोड का उपयोग करके Axios विकल्पों में एक params प्रॉपर्टी निर्दिष्ट कर सकते हैं:

ये दो उदाहरण नाम" date "और मान के साथ एक पैरामीटर भेजते हैं" 05/15/2020 "निर्दिष्ट URL पर।

< डिव स्टाइल = "स्पष्ट: दोनों; मार्जिन-टॉप: 0EM; मार्जिन-बॉटम: 0.5em;"> <शैली मीडिया =" सभी "> u724302d4bdb4795c3df2927a31e23d62 {paddingc3df2927a31e23d62 {पैडिंग ; मार्जिन:। 0; पैडिंग-टॉप: पहला महत्वपूर्ण; पैडिंग-बॉटम: पहला: 100% महत्वपूर्ण ;; प्रदर्शन चौड़ाई: ब्लॉक; फ़ॉन्ट- वजन: 700; पृष्ठभूमि-रंग: #FFF; सीमा: 0 महत्वपूर्ण; सीमा-बाएं: 4px ठोस महत्वपूर्ण विरासत में मिला; पाठ-सजावट: कोई नहीं} .u724302d4bdb4795c3df2927a31e23d62: सक्रिय, .u724302d4bdb4795c3df2927a31e {: 1; संक्रमण: 250ms की अस्पष्टता; -संक्रमण 250ms की वेबकिट अस्पष्टता, text4db62d4731cd की सजावट} {: 1: 250ms रंग पृष्ठभूमि; वेबकिट-संक्रमण: 250 एमएस रंग पृष्ठभूमि, अस्पष्टता: 1; संक्रमण: अस्पष्टता 250 एमएस; वेबकिट -संक्रमण: 250ms की अस्पष्टता} .u724302d4bdb4795c3df2927a31e23d62 .ctaText {फ़ॉन्ट-वेट: 700; रंग: # 000; पाठ-सजावट: कोई नहीं; फ़ॉन्ट-आकार: 16px} .u724302d4bdb4795c3df2927a31e23d62: रंग: # 3detitle95 n महत्वपूर्ण रूप से, फ़ॉन्ट का आकार: 16px} .u724302d4bdb4795c3df2927a31e23d62: hover .postTitle {text-decoration} महत्वपूर्ण शैली = "padding 1em; "> " PLUS: JavaScriptOf index: एक स्टेप बाय स्टेप गाइड

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

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

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

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

Axios post ("https://urlhere.com", { शीर्ष: {"नाम": "जेम्स "}}) 

निष्कर्ष

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

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