React में Axios का उपयोग
In this page:
const api = axios.create({ baseURL: "https://api.example.com" });
axios.get(url)
.then(response => setData(response.data))
.catch(error => setError(error));Axios से एक GET Request बनाना
axios.get(url) एक GET request भेजता है और एक Promise return करता है जो directly parsed response data में resolve होता है (response.data के under), fetch() को चाहिए वाले extra .json() step को skip करते हुए।
यह slightly shorter, ज़्यादा consistent API axios के main appeals में से एक है।
- response.data actual payload रखता है
- response.status और response.headers भी ज़रूरत पड़ने पर available हैं।
उदाहरण: Making a GET Request with Axios
// Run in your local React project (npm install required)
import axios from 'axios';
function App() {
const [data, setData] = React.useState(null);
React.useEffect(() => {
axios.get('/api/data').then(response => setData(response.data));
}, []);
return <p>{data ? data.message : "Loading..."}</p>;
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
Axios से Errors Handle करना
चूंकि axios automatically HTTP error statuses पर reject होता है, एक .catch() block (या async/await के साथ try/catch) network failures और server error responses दोनों को एक ही जगह reliably catch करता है, fetch के manual response.ok check की तुलना में error handling simplify करते हुए।
उदाहरण: Handling Errors with Axios
// Run in your local React project (npm install required)
import axios from 'axios';
async function loadData(setError) {
try {
const response = await axios.get('/api/data');
return response.data;
} catch (error) {
setError(error.message);
}
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
एक Reusable Axios Instance बनाना
axios.create() baseURL और default headers जैसी settings के साथ एक pre-configured instance बनाता है, इसलिए आपको हर single request पर पूरा API URL और auth header दोहराना नहीं पड़ता।
यह instance एक बार बनाया जाता है और पूरे app में जहां ज़रूरत हो वहां import किया जाता है।
उदाहरण: Creating a Reusable Axios Instance
// Run in your local React project (npm install required)
import axios from 'axios';
const api = axios.create({
baseURL: 'https://api.example.com',
headers: { Authorization: 'Bearer token123' },
});
// Later, anywhere in the app:
// api.get('/users').then(response => console.log(response.data));⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
- यह भूल जाना कि axios responses already parsed हैं — response.data access करना, fetch जैसे .json() call करने के बजाय।
- Axios errors catch न करना, जो (fetch के विपरीत) default रूप से HTTP error statuses पर reject होता है।
- Component के बाहर एक बार configure करने के बजाय हर render पर एक नया axios instance बनाना।
- Axios एक popular third-party HTTP client है, जो built-in fetch() से एक friendlier API देता है।
- fetch के विपरीत, axios automatically JSON responses parse करता है और HTTP error statuses पर अपना promise reject करता है।
- axios.get/post/put/delete corresponding HTTP methods को directly map करते हैं।
- axios.create() आपको एक base URL और default headers के साथ एक reusable instance configure करने देता है।
npm install axios चाहिए — इस sandbox में CDN से उपलब्ध नहीं है; किसी भी React version के साथ काम करता है।
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: