Axios: यह क्या है, HTTP अनुरोध और API के साथ काम करने की मूल बातें

Axios क्या है?

Axios एक JavaScript लाइब्रेरी है जो ब्राउज़र और Node.js वातावरण से HTTP अनुरोध करने के लिए डिज़ाइन की गई है। यह ब्राउज़र में XMLHttpRequest और Node.js में http मॉड्यूल के ऊपर बनी है, जो दोनों प्लेटफ़ॉर्म के लिए एकीकृत API प्रदान करती है।

नेटिव fetch की तुलना में Axios का मुख्य लाभ स्वचालित JSON हैंडलिंग, इंटरसेप्टर समर्थन और अधिक सुविधाजनक त्रुटि प्रबंधन है। fetch के विपरीत, Axios को JSON प्रतिक्रिया बॉडी प्राप्त करने के लिए दो .then कॉल की आवश्यकता नहीं होती है और यह HTTP त्रुटियों (4xx, 5xx) पर स्वचालित रूप से अपवाद फेंकता है।

लाइब्रेरी सभी प्रमुख HTTP विधियों का समर्थन करती है: GET, POST, PUT, DELETE, PATCH और HEAD। इसका उपयोग सरल प्रोजेक्ट से लेकर दैनिक सैकड़ों हज़ारों अनुरोधों वाले बड़े कॉर्पोरेट अनुप्रयोगों तक में किया जा सकता है।

Axios की प्रमुख विशेषताएँ

• Promise API — सभी ऑपरेशन Promise लौटाते हैं, जिससे अतुल्यकालिक कोड सरल हो जाता है
• TypeScript समर्थन — सभी विधियों और कॉन्फ़िगरेशन के लिए पूर्ण टाइपिंग
• इंटरसेप्टर — अनुरोधों और प्रतिक्रियाओं के प्रसंस्करण के लिए मिडलवेयर
• रूपांतरण — इनपुट और आउटपुट पर स्वचालित डेटा रूपांतरण

Axios की संरचना और कार्य सिद्धांत

Axios की संरचना एडेप्टर की अवधारणा पर आधारित है। लाइब्रेरी ट्रांसपोर्ट लेयर को एब्सट्रैक्ट करती है: यह ब्राउज़र में XMLHttpRequest और Node.js में http या https मॉड्यूल का उपयोग करती है। यह रनटाइम वातावरण के बावजूद एक एकल इंटरफ़ेस प्रदान करती है।

प्रत्येक अनुरोध इंटरसेप्टर की एक श्रृंखला से गुज़रता है जो अनुरोध कॉन्फ़िगरेशन या प्रतिक्रिया को संशोधित कर सकते हैं। इंटरसेप्टर के बाद, अनुरोध एडेप्टर को भेजा जाता है, जो वास्तविक HTTP कॉल करता है। प्रतिक्रिया तब एप्लिकेशन कोड तक पहुँचने से पहले प्रतिक्रिया इंटरसेप्टर से गुज़रती है।

Axios अनुरोध जीवनचक्र

1. कॉन्फ़िगरेशन निर्माण — विधि, URL, हेडर, अनुरोध बॉडी
2. अनुरोध इंटरसेप्टर — कॉन्फ़िगरेशन संशोधन, टोकन जोड़ना
3. HTTP कॉल — ब्राउज़र या Node.js एडेप्टर के माध्यम से निष्पादन
4. प्रतिक्रिया इंटरसेप्टर — प्रतिक्रिया रूपांतरण, त्रुटि प्रबंधन
5. परिणाम वापसी — Promise डेटा के साथ हल होता है या अस्वीकृत होता है

Axios की मुख्य विशेषताएँ

Axios में कई अंतर्निहित विशेषताएँ शामिल हैं जो इसे मोबाइल और वेब एप्लिकेशन में HTTP के साथ काम करने के लिए एक सुविधाजनक विकल्प बनाती हैं। आइए मुख्य विशेषताओं पर नज़र डालें।

स्वचालित डेटा रूपांतरण

अनुरोध भेजते समय, Axios स्वचालित रूप से JSON.stringify का उपयोग करके JavaScript ऑब्जेक्ट को JSON स्ट्रिंग में बदल देता है। प्रतिक्रिया प्राप्त करते समय, लाइब्रेरी JSON को वापस ऑब्जेक्ट में पार्स करती है। यह डेवलपर को मैन्युअल सीरियलाइज़ेशन और डी-सीरियलाइज़ेशन से बचाता है।

CSRF सुरक्षा

ब्राउज़र वातावरण में, Axios स्वचालित रूप से कुकीज़ से XSRF-TOKEN हेडर जोड़ता है, जो एप्लिकेशन को क्रॉस-साइट अनुरोध जालसाजी से बचाता है। ऐसा करने के लिए, सर्वर को XSRF-TOKEN नामक कुकी में टोकन भेजने के लिए कॉन्फ़िगर करना पर्याप्त है।

टाइमआउट और अनुरोध रद्द करना

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

Axios की स्थापना और कॉन्फ़िगरेशन

Axios की स्थापना किसी भी पैकेज मैनेजर के माध्यम से की जाती है। लाइब्रेरी npm रजिस्ट्री में उपलब्ध है और इसे Node.js और ब्राउज़र दोनों प्रोजेक्ट में उपयोग किया जा सकता है। TypeScript के लिए, प्रकार मुख्य पैकेज में शामिल हैं — अतिरिक्त निर्भरताओं की आवश्यकता नहीं है।

स्थापना के बाद, आप मूल कॉन्फ़िगरेशन के साथ एक इंस्टेंस बना सकते हैं: आधार URL, डिफ़ॉल्ट टाइमआउट, सामान्य हेडर। यह प्रत्येक अनुरोध में समान पैरामीटर दोहराने से बचाता है और HTTP क्लाइंट सेटिंग्स को केंद्रीय रूप से प्रबंधित करने की अनुमति देता है।

# npm के माध्यम से स्थापित करें
npm install axios

# yarn के माध्यम से स्थापित करें
yarn add axios

# pnpm के माध्यम से स्थापित करें
pnpm add axios

कॉन्फ़िगरेशन के साथ इंस्टेंस बनाना

प्रत्येक API सेवा के लिए एक अलग Axios इंस्टेंस बनाने की अनुशंसा की जाती है। यह एक आधार URL, मानक हेडर और टाइमआउट सेट करने की अनुमति देता है जो प्रत्येक कॉल में दोहराए बिना इस इंस्टेंस के सभी अनुरोधों पर लागू होंगे।

import axios from 'axios';

const api = axios.create({
  baseURL: 'https://api.example.com/v1',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json'
  }
});

Axios के साथ कोड उदाहरण

अनुरोध उदाहरण Axios के उपयोग के मुख्य पैटर्न दिखाते हैं। सभी उदाहरण async/await सिंटैक्स का उपयोग करते हैं, जो .then() श्रृंखलाओं की तुलना में अतुल्यकालिक कोड को अधिक पठनीय बनाता है।

पैरामीटर के साथ GET अनुरोध

सर्वर से डेटा प्राप्त करने के लिए axios.get विधि का उपयोग किया जाता है। अनुरोध पैरामीटर params ऑब्जेक्ट के माध्यम से पास किए जाते हैं, जो स्वचालित रूप से क्वेरी स्ट्रिंग में बदल जाता है। प्रतिक्रिया में data फ़ील्ड में डेटा, status में स्थिति और headers में हेडर होते हैं।

interface User {
  id: number;
  name: string;
  email: string;
}

async function getUsers() {
  try {
    const response = await api.get<User[]>('/users', {
      params: { page: 1, limit: 10 }
    });
    return response.data;
  } catch (error) {
    console.error('उपयोगकर्ताओं को लोड करने में त्रुटि', error);
    throw error;
  }
}

बॉडी के साथ POST अनुरोध

सर्वर पर डेटा भेजने के लिए axios.post का उपयोग किया जाता है। दूसरा तर्क डेटा वाला एक ऑब्जेक्ट है, जिसे Axios स्वचालित रूप से JSON में सीरियलाइज़ करता है। Content-Type डिफ़ॉल्ट रूप से application/json पर सेट होता है।

interface CreateUserDto {
  name: string;
  email: string;
  role: string;
}

async function createUser(data: CreateUserDto) {
  const response = await api.post<User>('/users', data);
  return response.data;
}

इंटरसेप्टर

इंटरसेप्टर मिडलवेयर फ़ंक्शन हैं जो प्रत्येक अनुरोध या प्रतिक्रिया के लिए निष्पादित होते हैं। वे प्रमाणीकरण टोकन जोड़ने, अनुरोधों को लॉग करने और त्रुटियों को केंद्रीय रूप से संभालने की अनुमति देते हैं। अनुरोध इंटरसेप्टर स्टोरेज से प्राप्त टोकन के साथ Authorization हेडर जोड़ता है।

// अनुरोध इंटरसेप्टर — प्रमाणीकरण टोकन जोड़ता है
api.interceptors.request.use(
  (config) => {
    const token = getToken();
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

// प्रतिक्रिया इंटरसेप्टर — 401 त्रुटियों को संभालता है
api.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response?.status === 401) {
      redirectToLogin();
    }
    return Promise.reject(error);
  }
);

Axios में त्रुटि प्रबंधन

त्रुटि प्रबंधन Axios में अपवाद तंत्र पर आधारित है। fetch के विपरीत, Axios स्वचालित रूप से HTTP त्रुटियों (4xx, 5xx) को पकड़ता है और उन्हें catch ब्लॉक में भेजता है। त्रुटि ऑब्जेक्ट में सर्वर प्रतिक्रिया, अनुरोध और निष्पादन संदर्भ के बारे में जानकारी होती है।

तीन प्रकार की त्रुटियों के बीच अंतर करना महत्वपूर्ण है: सर्वर प्रतिक्रिया त्रुटि (response), अनुरोध त्रुटि (request) और कॉन्फ़िगरेशन त्रुटि (config)। पहली तब होती है जब HTTP कॉल सफलतापूर्वक निष्पादित होती है लेकिन त्रुटि कोड लौटाती है, दूसरी तब होती है जब सर्वर से कोई प्रतिक्रिया नहीं होती, और तीसरी तब होती है जब अनुरोध कॉन्फ़िगरेशन गलत होता है।

import axios, { AxiosError } from 'axios';

async function safeRequest() {
  try {
    return await api.get('/data');
  } catch (error) {
    if (error instanceof AxiosError) {
      if (error.response) {
        console.warn('प्रतिक्रिया त्रुटि', error.response.status);
      } else if (error.request) {
        console.warn('सर्वर से कोई प्रतिक्रिया नहीं');
      } else {
        console.warn('कॉन्फ़िगरेशन त्रुटि');
      }
    }
  }
}

Axios की Fetch API से तुलना

Axios की तुलना नेटिव Fetch API से करने से यह समझने में मदद मिलती है कि प्रत्येक तकनीक कब उपयुक्त है। Fetch ब्राउज़र में निर्मित API है जिसे स्थापित करने की आवश्यकता नहीं है। Axios अतिरिक्त सुविधाओं वाली तृतीय-पक्ष लाइब्रेरी है। सरल अनुरोधों के लिए fetch पर्याप्त है; इंटरसेप्टर और केंद्रीकृत त्रुटि प्रबंधन वाले जटिल अनुप्रयोगों के लिए Axios अधिक सुविधाजनक है।

Fetch HTTP त्रुटियों (4xx, 5xx) को अपवाद नहीं मानता — response.ok की जाँच करनी होती है। Fetch को JSON प्राप्त करने के लिए दो .then() कॉल की आवश्यकता होती है: response.json() फिर डेटा के साथ Promise लौटाता है। Axios यह स्वचालित रूप से करता है। Fetch अतिरिक्त पॉलीफिल के बिना फ़ाइल अपलोड प्रगति का समर्थन नहीं करता। Axios में अंतर्निहित onUploadProgress और onDownloadProgress हैं।

Node.js में, Fetch संस्करण 18 से एक प्रयोगात्मक सुविधा के रूप में उपलब्ध है, जबकि Axios Node.js 10 से स्थिर रूप से काम करता है। पुराने Node.js संस्करणों का समर्थन करने वाले प्रोजेक्ट के लिए, चुनाव Axios के पक्ष में स्पष्ट है। आधुनिक ब्राउज़र प्रोजेक्ट के लिए जटिल अनुरोध प्रसंस्करण के बिना, fetch पर्याप्त हो सकता है।