Axios JavaScript (Node.js): पूरी गाइड उदाहरणों के साथ

Axios क्या है और इसकी आवश्यकता क्यों है?

Axios एक शक्तिशाली और लोकप्रिय JavaScript लाइब्रेरी है जो HTTP रिक्वेस्ट करने के लिए उपयोग होती है। यह ब्राउज़र और Node.js दोनों में काम करती है, और Promise पर आधारित एक सरल, एकीकृत API प्रदान करती है। अगर आपको किसी API से GET रिक्वेस्ट करनी है, POST के ज़रिए सर्वर पर डेटा भेजना है, या JSON फ़ॉर्मेट में रिस्पॉन्स प्रोसेस करना है — Axios इसे बेहद आसान और प्रभावी बनाता है।

बिल्ट-इन fetch या XMLHttpRequest की जगह Axios क्यों इस्तेमाल करें?

• ऑटोमैटिक JSON हैंडलिंग: Axios रिस्पॉन्स को अपने आप JSON में बदल देता है, इसलिए response.json() कॉल करने की ज़रूरत नहीं।
• इंटरसेप्टर (Interceptors): आप सभी रिक्वेस्ट (जैसे ऑथराइज़ेशन टोकन) या रिस्पॉन्स (जैसे एरर हैंडलिंग) के लिए ग्लोबल लॉजिक आसानी से जोड़ सकते हैं।
• रिक्वेस्ट कैंसल करना: AbortController के ज़रिए रिक्वेस्ट को कैंसल करने की बिल्ट-इन सुविधा।
• CSRF प्रोटेक्शन: सुरक्षा बढ़ाने के लिए XSRF टोकन के साथ ऑटोमैटिक काम करता है।
• अपलोड/डाउनलोड प्रोग्रेस: डेटा भेजने और प्राप्त करने की प्रगति को ट्रैक करने की सुविधा।
• बेहतर एरर हैंडलिंग: ज़्यादा जानकारीपूर्ण एरर मैसेज और रिस्पॉन्स स्टेटस को आसानी से अलग करने की क्षमता।
• पुराने ब्राउज़र सपोर्ट: fetch के विपरीत, Axios Internet Explorer 11 और अन्य पुराने ब्राउज़र में भी काम करता है।

इंस्टॉलेशन

Node.js प्रोजेक्ट या फ्रंटएंड प्रोजेक्ट में Axios इंस्टॉल करना (npm/yarn/pnpm के ज़रिए) एक ही कमांड में हो जाता है:

# npm के ज़रिए इंस्टॉल करें (सुझाव)
npm install axios

# yarn के ज़रिए इंस्टॉल करें
yarn add axios

# pnpm के ज़रिए इंस्टॉल करें
pnpm add axios

ब्राउज़र में उपयोग के लिए, आप CDN के ज़रिए भी Axios को जोड़ सकते हैं:

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

त्वरित शुरुआत

इंस्टॉल करने के बाद, आप तुरंत रिक्वेस्ट करना शुरू कर सकते हैं। यहाँ एक सार्वजनिक API पर GET रिक्वेस्ट का सबसे सरल उदाहरण है:

// लाइब्रेरी को इम्पोर्ट करें (Node.js या मॉड्यूलर प्रोजेक्ट के लिए)
import axios from 'axios';

// JSONPlaceholder API पर GET रिक्वेस्ट करें
axios.get('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    console.log('रिस्पॉन्स स्टेटस:', response.status);
    console.log('डेटा:', response.data);
  })
  .catch(error => {
    console.error('रिक्वेस्ट में त्रुटि:', error.message);
  });

यह कोड GET रिक्वेस्ट भेजेगा, रिस्पॉन्स प्राप्त करेगा और उसका स्टेटस और बॉडी प्रिंट करेगा (जो पहले से ही JSON से JavaScript ऑब्जेक्ट में अपने आप बदल चुका होगा)।

मुख्य तरीके और फंक्शन

Axios सभी मुख्य HTTP तरीकों के लिए सुविधाजनक रैपर तरीके प्रदान करता है। इनमें से प्रत्येक एक Promise रिटर्न करता है।

1. axios.get(url, config?)

क्या करता है: सर्वर से डेटा प्राप्त करने के लिए HTTP GET रिक्वेस्ट करता है।

पैरामीटर:

• url (string) — रिक्वेस्ट का URL पता।
• config (object, वैकल्पिक) — Axios कॉन्फ़िगरेशन ऑब्जेक्ट (जैसे headers, query-स्ट्रिंग के लिए params, timeout)।

उदाहरण:

// query-पैरामीटर के साथ रिक्वेस्ट
axios.get('https://api.example.com/users', {
  params: {
    page: 2,
    limit: 10
  },
  headers: {
    'Authorization': 'Bearer my-token'
  }
})
.then(response => {
  console.log(response.data);
});

2. axios.post(url, data?, config?)

क्या करता है: सर्वर पर डेटा भेजने के लिए HTTP POST रिक्वेस्ट करता है (आमतौर पर नया संसाधन बनाने के लिए)।

पैरामीटर:

• url (string) — रिक्वेस्ट का URL पता।
• data (object, वैकल्पिक) — सर्वर को भेजा जाने वाला डेटा (आमतौर पर JSON ऑब्जेक्ट)।
• config (object, वैकल्पिक) — Axios कॉन्फ़िगरेशन ऑब्जेक्ट।

उदाहरण:

// नया उपयोगकर्ता बनाने के लिए POST रिक्वेस्ट
axios.post('https://api.example.com/users', {
  name: 'राहुल शर्मा',
  email: 'rahul@example.com'
})
.then(response => {
  console.log('उपयोगकर्ता बनाया गया:', response.data);
})
.catch(error => {
  console.error('त्रुटि:', error);
});