Axios

Axios क्या है?

Axios ब्राउज़र और Node.js के लिए एक लोकप्रिय HTTP-क्लाइंट है, जो TypeScript में लिखा गया है। यह एसिंक्रोनस HTTP अनुरोधों को निष्पादित करने के लिए एक सुविधाजनक और आधुनिक API प्रदान करता है। यह लाइब्रेरी स्वचालित रूप से JSON डेटा को संसाधित करती है, इंटरसेप्टर (interceptors) को सपोर्ट करती है, CSRF से सुरक्षा प्रदान करती है और अनुरोधों को रद्द करने की सुविधा देती है।

Axios की आवश्यकता क्यों है?

बिल्ट-इन fetch के विपरीत, Axios अधिक सहज सिंटैक्स, स्वचालित डेटा ट्रांसफॉर्मेशन और बिल्ट-इन एरर हैंडलिंग प्रदान करता है। यह REST API क्लाइंट बनाने, ऑथेंटिकेशन के साथ काम करने और फ़ाइलें अपलोड करने के लिए आदर्श है। TypeScript के समर्थन के कारण, आपको सभी अनुरोधों और प्रतिक्रियाओं पर सख्त टाइपिंग मिलती है।

इंस्टॉलेशन

प्रोजेक्ट में Axios इंस्टॉल करने के लिए npm या yarn का उपयोग करें:

npm install axios# याyarn add axios

TypeScript के साथ काम करने के लिए टाइप्स इंस्टॉल करें (आमतौर पर वे पहले से शामिल होते हैं):

npm install @types/axios

मुख्य कार्यक्षमताएँ

• सभी HTTP विधियों का समर्थन: GET, POST, PUT, DELETE, PATCH और अन्य।
• स्वचालित JSON सीरियलाइज़ेशन: डेटा स्वचालित रूप से रूपांतरित होता है।
• इंटरसेप्टर (interceptors): अनुरोधों और प्रतिक्रियाओं को वैश्विक रूप से संसाधित किया जा सकता है (जैसे, टोकन जोड़ने के लिए)।
• अनुरोध रद्द करना: CancelToken या AbortController का उपयोग करके।
• फ़ाइल अपलोड: onUploadProgress के माध्यम से अपलोड प्रगति का समर्थन।
• CSRF से सुरक्षा: कुकीज़ और हेडर के साथ स्वचालित कार्य।
• टाइपिंग: जेनेरिक्स के साथ TypeScript का पूर्ण समर्थन।

TypeScript पर कोड उदाहरण

प्रतिक्रिया टाइपिंग के साथ बुनियादी GET अनुरोध:

import axios, { AxiosResponse } from 'axios';

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

async function getUser(id: number): Promise<User> {  const response: AxiosResponse<User> = await axios.get(`/api/users/${id}`);  return response.data;}

// उपयोगgetUser(1).then(user => console.log(user.name));

डेटा भेजने के साथ POST अनुरोध का उदाहरण:

import axios from 'axios';

interface CreateUserPayload {  name: string;  email: string;}

const newUser: CreateUserPayload = { name: 'John', email: 'john@example.com' };

axios.post('/api/users', newUser)  .then(response => console.log('User created:', response.data))  .catch(error => console.error('Error:', error));

टोकन जोड़ने के लिए इंटरसेप्टर के साथ उदाहरण:

import axios from 'axios';

axios.interceptors.request.use(config => {  const token = localStorage.getItem('token');  if (token) {    config.headers.Authorization = `Bearer ${token}`;  }  return config;});

Axios का उपयोग कब करें

Axios निम्नलिखित के लिए आदर्श है:

• React, Vue, Angular या Svelte पर क्लाइंट एप्लिकेशन बनाना।
• Node.js सर्वर जहां सुविधाजनक HTTP क्लाइंट की आवश्यकता हो।
• ऐसे प्रोजेक्ट जहां सख्त TypeScript टाइपिंग महत्वपूर्ण हो।
• उन स्थितियों में जहां इंटरसेप्टर, अनुरोध रद्द करना या अपलोड प्रगति की आवश्यकता हो।

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