एक्सियोस के साथ काम करने के लिए एक पूर्ण गाइड

Axios एक JavaScript लाइब्रेरी है जो क्लाइंट-साइड JavaScript कोड या सर्वर-साइड Node.js कोड से HTTP अनुरोध भेजने के लिए एक सरल API प्रदान करती है। Axios जावास्क्रिप्ट के प्रॉमिस एपीआई पर बनाया गया है, जो एसिंक्रोनस कोड को अधिक बनाए रखने योग्य बनाता है।

Axios के साथ शुरुआत करना

आप सामग्री वितरण नेटवर्क (CDN) का उपयोग करके या इसे अपने प्रोजेक्ट में इंस्टॉल करके अपने ऐप में Axios का उपयोग कर सकते हैं।

HTML में सीधे Axios का उपयोग करने के लिए, नीचे दिए गए CDN लिंक को कॉपी करें और इसे अपनी HTML फ़ाइल के मुख्य भाग में डालें:

<लिखी हुई कहानीस्रोत=" https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js">लिखी हुई कहानी>

इस दृष्टिकोण के साथ, आप Axios और उसके उपयोग कर सकते हैं HTTP तरीके आपकी HTML स्क्रिप्ट के मुख्य भाग में। Axios भी कर सकते हैं रिएक्ट जैसे ढांचे में REST API का उपभोग करें.

Node.js प्रोजेक्ट में Axios का उपयोग करने के लिए, इसे npm या यार्न पैकेज मैनेजर का उपयोग करके अपनी प्रोजेक्ट डायरेक्टरी में इंस्टॉल करें:

एनपीएम अक्षीय स्थापित करें
# या
यार्न axios जोड़ें

स्थापना के बाद, आप अपने जावास्क्रिप्ट प्रोजेक्ट में एक्सियोस का उपयोग शुरू कर सकते हैं:

कॉन्स्ट अक्षीय = ज़रूरत होना('अक्षीय');

इस गाइड के साथ आप मुफ्त में काम करेंगे JSONप्लेसहोल्डर एपीआई। जबकि इस एपीआई में संसाधनों का एक सेट है, आप केवल इसका उपयोग करेंगे /comments और /posts समापन बिंदु। समापन बिंदु विशिष्ट URL हैं जिन्हें डेटा को पुनः प्राप्त करने या हेरफेर करने के लिए एक्सेस किया जा सकता है।

Axios के साथ GET अनुरोध करना

Axios का उपयोग करके GET अनुरोध करने के कई तरीके हैं। हालाँकि, वाक्य-विन्यास आमतौर पर वरीयता पर निर्भर करता है।

GET अनुरोध करने के तरीकों में से एक का उपयोग करना है अक्षीय () एक वस्तु के साथ विधि जो अनुरोध विधि को निर्दिष्ट करती है पाना और अनुरोध भेजने के लिए URL।

उदाहरण के लिए:

कॉन्स्ट अक्षीय = ज़रूरत होना("अक्षीय");
अक्षीय ({
 तरीका: "पाना",
 यूआरएल: " https://jsonplaceholder.typicode.com/comments",
})
 ।तब((आर ई) => {
सांत्वना देनालॉग (res.data);
 })
 ।पकड़ना((ग़लती होना) => {
सांत्वना देनात्रुटि (त्रुटि);
 });

यह उदाहरण बनाता है अतुल्यकालिक प्रोग्रामिंग मॉडल का उपयोग करने का वादा जंजीर से ।तब() और ।पकड़ना() तरीके। अनुरोध के सफल होने पर वादा कंसोल की प्रतिक्रिया को लॉग करता है और अनुरोध के विफल होने पर त्रुटि संदेश को लॉग करता है।

Axios GET अनुरोध करने का एक आसान तरीका भी प्रदान करता है जो किसी ऑब्जेक्ट को चेनिंग द्वारा पास करने की आवश्यकता को समाप्त करता है ।पाना() विधि को axios उदाहरण।

उदाहरण के लिए:

axios
 ।पाना(" https://jsonplaceholder.typicode.com/comments")
 ।तब((आर ई) => {
सांत्वना देनालॉग (res.data);
 })
 ।पकड़ना((ग़लती होना) => {
सांत्वना देनात्रुटि (त्रुटि);
 });

एक्सियोस के साथ पोस्ट अनुरोध करना

Axios के साथ POST अनुरोध करना GET अनुरोध करने के समान है। आप इस अनुरोध का उपयोग करके सर्वर को डेटा भेज सकते हैं।

नीचे दिया गया कोड स्निपेट Axios' का उपयोग करने का एक उदाहरण है ।डाक() तरीका:

axios
 ।डाक(" https://jsonplaceholder.typicode.com/comments", {
 नाम: "जैक्सन स्मिथ",
 ईमेल: "[email protected]",
 शरीर: "यह कला का एक टुकड़ा है।",
 })
 ।तब((आर ई) => {
सांत्वना देनालॉग (res.data);
 })
 ।पकड़ना((ग़लती होना) => {
सांत्वना देनात्रुटि (त्रुटि);
 });

कोड एक नई टिप्पणी बनाने के लिए JSONPlaceholder API को एक POST अनुरोध करता है। axios.post विधि को डेटा भेजता है /comments समापन बिंदु।

रिक्वेस्ट में भेजा गया डेटा एक ऑब्जेक्ट है जिसमें a नाम, ईमेल, और शरीर संपत्ति। यदि अनुरोध सफल होता है, तो तब विधि प्रतिक्रिया डेटा को कंसोल में लॉग करती है। और अगर कोई त्रुटि है, पकड़ना विधि कंसोल में त्रुटि लॉग करती है।

Axios के साथ PUT/PATCH अनुरोध करना

आप सर्वर पर मौजूदा संसाधन को अपडेट करने के लिए PUT या PATCH अनुरोध का उपयोग कर सकते हैं। जबकि PUT पूरे संसाधन को बदल देता है, PATCH केवल निर्दिष्ट फ़ील्ड को अपडेट करता है।

Axios के साथ PUT या PATCH अनुरोध करने के लिए, आपको इसका उपयोग करने की आवश्यकता है ।रखना() या ।पैबंद() क्रमशः तरीके।

अद्यतन करने के लिए इन विधियों का उपयोग करने का एक उदाहरण यहां दिया गया है ईमेल 100 की आईडी के साथ टिप्पणी की संपत्ति:

कॉन्स्ट अक्षीय = ज़रूरत होना("अक्षीय");
axios
 ।पाना(" https://jsonplaceholder.typicode.com/comments/100")
 ।तब((आर ई) => {
सांत्वना देना.लॉग (res.data.email);
 })
 ।पकड़ना((ग़लती होना) => {
सांत्वना देनात्रुटि (त्रुटि);
 });
// आउटपुट:
// 'लियोन_फे@orrin.com'
axios
 ।पैबंद(" https://jsonplaceholder.typicode.com/comments/100", {
 ईमेल: "[email protected]",
 })
 ।तब((आर ई) => {
सांत्वना देना.लॉग (res.data.email);
 })
 ।पकड़ना((ग़लती होना) => {
सांत्वना देनात्रुटि (त्रुटि);
 });
// आउटपुट:
// '[email protected]',

यह प्रोग्राम पहले एंडपॉइंट के लिए एक GET अनुरोध करता है " https://jsonplaceholder.typicode.com/comments/100". यह तब लॉग करता है ईमेल आईडी के साथ टिप्पणी की संपत्ति 100 कंसोल के लिए। हम एक GET अनुरोध कर रहे हैं ताकि आप देख सकें कि PATCH अनुरोध करने के बाद क्या बदला।

दूसरा अनुरोध उसी समापन बिंदु के लिए एक PATCH अनुरोध है। यह कोड टिप्पणी के ईमेल को अपडेट करता है [email protected].

Axios के साथ DELETE अनुरोध करना

आप उपयोग कर सकते हैं मिटाना सर्वर पर एक संसाधन को हटाने का अनुरोध।

कैसे उपयोग करने के लिए निम्न उदाहरण लें ।मिटाना() सर्वर से संसाधन हटाने की विधि:

axios
 ।मिटाना(" https://jsonplaceholder.typicode.com/comments/10")
 ।तब((आर ई) => {
सांत्वना देनालॉग (res.data);
 })
 ।पकड़ना((ग़लती होना) => {
सांत्वना देनात्रुटि (त्रुटि);
 });
//Output:
// {}

कंसोल पर एक खाली ऑब्जेक्ट लॉग करके, उपरोक्त कोड दिखाता है कि उसने 10 की आईडी के साथ टिप्पणी हटा दी है।

Axios के साथ एक साथ अनुरोध करना

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

निम्नलिखित उदाहरण में, ।सभी() विधि एक साथ दो समापन बिंदुओं से डेटा पुनर्प्राप्त करती है:

axios
 ।सभी([
 axios.get(" https://jsonplaceholder.typicode.com/comments? _सीमा=2"),
 axios.get(" https://jsonplaceholder.typicode.com/posts? _सीमा=2"),
 ])
 ।तब(
 axios.spread((टिप्पणियाँ, पोस्ट) => {
सांत्वना देनालॉग (टिप्पणियां। डेटा);
सांत्वना देना.लॉग (पोस्ट.डेटा);
 })
 )
 ।पकड़ना((ग़लती होना) =>सांत्वना देना.त्रुटि (त्रुटि));

उपरोक्त कोड ब्लॉक एक साथ अनुरोध भेजता है और फिर प्रतिक्रियाओं को पास करता है ।तब() तरीका। Axios के ।फैलाना() विधि प्रतिक्रियाओं को अलग करती है और प्रत्येक प्रतिक्रिया को उसके चर के लिए निर्दिष्ट करती है।

अंत में, कंसोल लॉग करता है आंकड़े दो प्रतिक्रियाओं की संपत्ति: टिप्पणियाँ और पोस्ट।

Axios के साथ अनुरोधों को रोकना

कभी-कभी, आपको सर्वर पर आने से पहले अनुरोध को रोकना पड़ सकता है। आप एक्सियोस का उपयोग कर सकते हैं' इंटरसेप्टर.अनुरोध.उपयोग () अनुरोधों को रोकने की विधि।

निम्नलिखित उदाहरण में, विधि प्रत्येक अनुरोध के लिए कंसोल के अनुरोध के प्रकार को लॉग करती है:

axios.interceptors.request.use(
 (विन्यास) => {
सांत्वना देना।लकड़ी का लट्ठा(`${config.विधि} अनुरोध किया');
वापस करना विन्यास;
 },
 (त्रुटि) => {
वापस करनावादाअस्वीकार (त्रुटि);
 }
);
axios
 ।पाना(" https://jsonplaceholder.typicode.com/comments? _सीमा=2")
 ।तब((आर ई) =>सांत्वना देना.लॉग (res.data))
 ।पकड़ना((ग़लती होना) =>सांत्वना देना.त्रुटि (त्रुटि));

कार्यक्रम एक Axios इंटरसेप्टर का उपयोग करके परिभाषित करता है axios.interceptors.request.use तरीका। यह तरीका अपनाता है कॉन्फ़िग और गलती तर्क के रूप में वस्तुएँ। कॉन्फ़िग ऑब्जेक्ट में अनुरोध विधि सहित अनुरोध के बारे में जानकारी होती है (config.विधि) और अनुरोध URL (config.यूआरएल).

इंटरसेप्टर फ़ंक्शन देता है कॉन्फ़िग ऑब्जेक्ट, अनुरोध को सामान्य रूप से आगे बढ़ने की इजाजत देता है। यदि कोई त्रुटि है, तो फ़ंक्शन अस्वीकृत हो जाता है वादा वस्तु।

अंत में, कार्यक्रम इंटरसेप्टर का परीक्षण करने का अनुरोध करता है। कंसोल किए गए अनुरोध के प्रकार को लॉग करेगा, इस मामले में, एक GET अनुरोध।

एक्सियोस में और भी बहुत कुछ है

आपने Axios का उपयोग करके अपने प्रोजेक्ट में अनुरोध करना और इंटरसेप्ट करना सीखा। कई अन्य सुविधाएँ, जैसे अनुरोधों को बदलना और Axios उदाहरणों का उपयोग करना आपके लिए एक जावास्क्रिप्ट डेवलपर के रूप में एक्सप्लोर करने के लिए उपलब्ध हैं। आपके जावास्क्रिप्ट अनुप्रयोगों में HTTP अनुरोध करने के लिए Axios एक पसंदीदा विकल्प बना हुआ है। हालाँकि, Fetch API एक और अच्छा विकल्प है जिसे आप एक्सप्लोर कर सकते हैं।