S02L05 – axios के साथ HTTP GET कॉल बनाना

Chand Sheikh
जनवरी 24, 2025
react-framework (hi)

html


React में Axios का उपयोग करके HTTP GET कॉल करना: एक व्यापक मार्गदर्शिका
सामग्री सूची

परिचय
React में HTTP कॉल्स को समझना
Axios का परिचय
Axios स्थापित करना
अपने React एप्लिकेशन में Axios सेटअप करना
डेटा प्राप्त करने के लिए क्लाइंट मेथड बनाना
Promises और Errors को संभालना
Axios को SamplePage Component के साथ एकीकृत करना
API कॉल का परीक्षण करना
निष्कर्ष


परिचय
आधुनिक वेब विकास के क्षेत्र में, कुशल डेटा प्राप्त करना अत्यंत महत्वपूर्ण है। चाहे आप एक डायनामिक सिंगल-पेज एप्लिकेशन बना रहे हों या एक जटिल वेब प्लेटफ़ॉर्म, विश्वसनीय HTTP कॉल्स बनाने की क्षमता आवश्यक है। यह मार्गदर्शिका React में Axios का उपयोग करके HTTP GET अनुरोध बनाने में गहराई से जाती है, जो एक लोकप्रिय promise-आधारित HTTP क्लाइंट है। हम इंस्टॉलेशन प्रक्रिया, React एप्लिकेशन में Axios सेटअप करना, प्रतिक्रियाओं और त्रुटियों को संभालना, और Axios को React कंपोनेंट्स के साथ एकीकृत करके डेटा को सहजता से प्राप्त और प्रदर्शित करने का तरीका देखेंगे।

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

Axios का परिचय
Axios ब्राउज़र और Node.js के लिए एक promise-आधारित HTTP क्लाइंट है। यह REST endpoints पर असिंक्रोनस HTTP अनुरोध भेजने और CRUD ऑपरेशन्स करने के लिए उपयोग में आसान API प्रदान करता है। Axios अपनी सरलता, पुराने ब्राउज़रों के लिए समर्थन, स्वचालित JSON डेटा ट्रांसफॉर्मेशन, और मजबूत error handling क्षमताओं के कारण अलग दिखता है। React के साथ एकीकृत होने पर, Axios डेटा प्राप्त करने की प्रक्रिया को सरल बनाता है, जिससे आपका विकास वर्कफ़्लो अधिक कुशल बनता है।
Axios क्यों चुनें?


विशेषता
Axios
Native Fetch API


ब्राउज़र समर्थन
विस्तृत, पुराने ब्राउज़रों शामिल
सीमित, केवल आधुनिक ब्राउज़र


डेटा ट्रांसफॉर्मेशन
स्वचालित JSON ट्रांसफॉर्मेशन
मैनुअल JSON पार्सिंग


Interceptors
हां, request/response के लिए
नहीं


Error Handling
व्यापक
मूल


Cancel Requests
समर्थित
लागू करना जटिल


Convenience Methods
हां (get, post)
सीमित उपयोगिता मेथड्स



Axios स्थापित करना
अपने React प्रोजेक्ट में Axios को शामिल करने के लिए, आपको इसे npm के माध्यम से इंस्टॉल करना होगा। एक विशिष्ट संस्करण स्थापित करना सुनिश्चित करना संगतता बनाए रखने में मदद करता है और संस्करण अपडेट से उत्पन्न होने वाली अप्रत्याशित समस्याओं को रोकता है।
इंस्टॉलेशन कमांड




		
		
			
			
Java
			
			npm install axios@1.6.2
			
				
					
				
					1
				
						npm install axios@1.6.2
					
				
			
		


नोट: वातावरणों में सामंजस्य सुनिश्चित करने के लिए वांछित संस्करण नंबर के साथ 1.6.2 को बदलें।

अपने React एप्लिकेशन में Axios सेटअप करना
एक बार Axios इंस्टॉल हो जाने के बाद, अगला कदम इसे अपने React प्रोजेक्ट में सेटअप करना है। इसमें बेस यूआरएल्स को कॉन्फ़िगर करना और HTTP अनुरोधों को बनाने के लिए utility मेथड्स बनाना शामिल है।
बेस यूआरएल कॉन्फ़िगर करना




		
		
			
			
Java
			
			// src/config.js
export const BASE_URL = 'http://localhost:3000';

			
				
					
				
					1
2
3
				
						// src/config.js
export const BASE_URL = 'http://localhost:3000';
 
					
				
			
		



डेटा प्राप्त करने के लिए क्लाइंट मेथड बनाना
अपने HTTP अनुरोधों को एक समर्पित क्लाइंट फाइल में केंद्रीकृत करना कोड की रखरखाव और पुन: उपयोगिता को बढ़ाता है। यहां Axios का उपयोग करके डेटा प्राप्त करने के लिए एक मेथड बनाने का तरीका बताया गया है।




		
		
			
			
Java
			
			// src/client/client.js
import axios from 'axios';
import { BASE_URL } from '../config';

const fetchGetData = (url) => {
  return axios
    .get(`${BASE_URL}${url}`)
    .then(response => response.data)
    .catch(error => {
      console.error('डेटा प्राप्त करने में त्रुटि:', error);
      throw error;
    });
};

export { fetchGetData };

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
				
						// src/client/client.js
import axios from 'axios';
import { BASE_URL } from '../config';
 
const fetchGetData = (url) => {
  return axios
    .get(`${BASE_URL}${url}`)
    .then(response => response.data)
    .catch(error => {
      console.error('डेटा प्राप्त करने में त्रुटि:', error);
      throw error;
    });
};
 
export { fetchGetData };
 
					
				
			
		


व्याख्या

Axios और कॉन्फ़िगरेशन इम्पोर्ट करना: HTTP अनुरोध करने के लिए Axios को इम्पोर्ट किया जाता है, और BASE_URL कॉन्फ़िगरेशन फाइल से लाया जाता है।
fetchGetData मेथड बनाना: यह मेथड एक URL लेता है, GET अनुरोध करता है, और डेटा लौटाता है।
Error Handling: अनुरोध के दौरान त्रुटियों को पकड़ा जाता है, कंसोल में लॉग किया जाता है, और आगे की हैंडलिंग के लिए फिर से फेंका जाता है।


Promises और Errors को संभालना
Axios ऑपरेशन्स प्रॉमिसेज लौटाते हैं, जिससे आप असिंक्रोनस कॉल्स को प्रभावी ढंग से संभाल सकते हैं। उचित error handling यह सुनिश्चित करती है कि आपका एप्लिकेशन नेटवर्क फेल्योर या गलत URL जैसी समस्याओं को सहजता से मैनेज कर सके।
कंपोनेंट में क्लाइंट मेथड का उपयोग करना




		
		
			
			
Java
			
			// src/pages/SamplePage.js
import React, { useEffect } from 'react';
import { fetchGetData } from '../client/client';

const SamplePage = () => {
  useEffect(() => {
    const apiUrl = '/api/data'; // अपने API endpoint से बदलें

    fetchGetData(apiUrl)
      .then(data => {
        console.log('API Response:', data);
      })
      .catch(error => {
        console.error('Response को संभालने में त्रुटि:', error);
      });
  }, []);

  return (
    <div>
      <h1>Sample Page</h1>
      {/* आपके UI कंपोनेंट्स यहां जाते हैं */}
    </div>
  );
};

export default SamplePage;

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
				
						// src/pages/SamplePage.js
import React, { useEffect } from 'react';
import { fetchGetData } from '../client/client';
 
const SamplePage = () => {
  useEffect(() => {
    const apiUrl = '/api/data'; // अपने API endpoint से बदलें
 
    fetchGetData(apiUrl)
      .then(data => {
        console.log('API Response:', data);
      })
      .catch(error => {
        console.error('Response को संभालने में त्रुटि:', error);
      });
  }, []);
 
  return (
    <div>
      <h1>Sample Page</h1>
      {/* आपके UI कंपोनेंट्स यहां जाते हैं */}
    </div>
  );
};
 
export default SamplePage;
 
					
				
			
		


व्याख्या

fetchGetData इम्पोर्ट करना: डेटा प्राप्त करने के लिए क्लाइंट मेथड को इम्पोर्ट किया जाता है।
useEffect Hook का उपयोग करना: यह सुनिश्चित करता है कि कंपोनेंट माउंट होने पर API कॉल किया जाए।
Promise को संभालना: .then ब्लॉक सफल प्रतिक्रिया को संभालता है, जबकि .catch ब्लॉक किसी भी त्रुटियों को मैनेज करता है।


Axios को SamplePage Component के साथ एकीकृत करना
कार्यक्षमता को प्रदर्शित करने के लिए, आइए Axios कॉल को एक React कंपोनेंट में एकीकृत करें जो होमपेज को रेंडर करने के लिए जिम्मेदार है।
Component सेटअप करना




		
		
			
			
Java
			
			// src/pages/SamplePage.js
import React, { useEffect, useState } from 'react';
import { fetchGetData } from '../client/client';

const SamplePage = () => {
  const [apiData, setApiData] = useState(null);

  useEffect(() => {
    const apiUrl = '/api/data'; // अपने API endpoint से बदलें

    fetchGetData(apiUrl)
      .then(data => {
        setApiData(data);
        console.log('API Response:', data);
      })
      .catch(error => {
        console.error('Response को संभालने में त्रुटि:', error);
      });
  }, []);

  return (
    <div>
      <h1>Sample Page</h1>
      {apiData ? (
        <pre>{JSON.stringify(apiData, null, 2)}
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
				
						// src/pages/SamplePage.js
import React, { useEffect, useState } from 'react';
import { fetchGetData } from '../client/client';
 
const SamplePage = () => {
  const [apiData, setApiData] = useState(null);
 
  useEffect(() => {
    const apiUrl = '/api/data'; // अपने API endpoint से बदलें
 
    fetchGetData(apiUrl)
      .then(data => {
        setApiData(data);
        console.log('API Response:', data);
      })
      .catch(error => {
        console.error('Response को संभालने में त्रुटि:', error);
      });
  }, []);
 
  return (
    <div>
      <h1>Sample Page</h1>
      {apiData ? (
        <pre>{JSON.stringify(apiData, null, 2)}
					
				
			
		

) : (
डेटा लोड हो रहा है...
      )}

विशेषता	Axios	Native Fetch API
ब्राउज़र समर्थन	विस्तृत, पुराने ब्राउज़रों शामिल	सीमित, केवल आधुनिक ब्राउज़र
डेटा ट्रांसफॉर्मेशन	स्वचालित JSON ट्रांसफॉर्मेशन	मैनुअल JSON पार्सिंग
Interceptors	हां, request/response के लिए	नहीं
Error Handling	व्यापक	मूल
Cancel Requests	समर्थित	लागू करना जटिल
Convenience Methods	हां (get, post)	सीमित उपयोगिता मेथड्स


  );

};

export default SamplePage;

व्याख्या

State Management: डेटा प्राप्त करने के लिए useState का उपयोग किया जाता है।
API Response के साथ State अपडेट करना: सफल API कॉल पर, प्रतिक्रिया डेटा को कंपोनेंट के state में संग्रहित किया जाता है, जिससे डेटा प्रदर्शित करने के लिए एक re-render ट्रिगर होता है।
Conditional Rendering: कंपोनेंट डेटा लोड हो रहे होने पर एक लोडिंग संदेश दिखाता है और उपलब्ध होने पर डेटा को प्रदर्शित करता है।

API कॉल का परीक्षण करना

Axios एकीकरण सेटअप करने के बाद, यह सुनिश्चित करने के लिए API कॉल का परीक्षण करना महत्वपूर्ण है कि सब कुछ अपेक्षित रूप से काम कर रहा है।

परीक्षण के चरण

React एप्लिकेशन शुरू करें: अपना React ऐप npm start का उपयोग करके चल रहे हैं सुनिश्चित करें।
Developer Tools खोलें: अपने ब्राउज़र में, नेटवर्क रिक्वेस्ट्स और कंसोल लॉग्स की निगरानी के लिए developer console खोलें।
SamplePage पर नेविगेट करें: उस पेज तक पहुंचें जहां API कॉल एकीकृत की गई है।
Network Request सत्यापित करें: Network टैब में जांचें कि GET अनुरोध सफलतापूर्वक किया गया है।
Console Logs की जांच करें: सुनिश्चित करें कि API प्रतिक्रिया सही ढंग से लॉग हो रही है और कोई त्रुटि नहीं है।

अपेक्षित परिणाम

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

निष्कर्ष

React में HTTP कॉल्स में महारत हासिल करना डायनामिक और प्रतिक्रियाशील वेब एप्लिकेशन बनाने के लिए आवश्यक है। Axios का उपयोग करके, डेवलपर्स HTTP GET अनुरोध बनाने की प्रक्रिया को सरल बना सकते हैं, प्रतिक्रियाओं और त्रुटियों को कुशलतापूर्वक संभाल सकते हैं, और साफ-सुथरे और व्यवस्थित कोडबेस बनाए रख सकते हैं। इस मार्गदर्शिका ने Axios को एक React प्रोजेक्ट में एकीकृत करने के लिए चरण-दर-चरण दृष्टिकोण प्रदान किया, स्थापना से लेकर परीक्षण तक, यह सुनिश्चित करते हुए कि आप अपने एप्लिकेशनों में डेटा को प्रभावी ढंग से प्राप्त और प्रबंधित कर सकते हैं।

SEO Keywords: React HTTP calls, Axios in React, making GET requests React, Axios tutorial, React data fetching, React Axios integration, HTTP client React, Axios installation, React API calls, handling promises in React

नोट: यह लेख AI द्वारा उत्पन्न किया गया है।