Axios इन का उपयोग करके एपीआई के साथ संचार करना React- एक चरण-दर-चरण मार्गदर्शिका

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

 

स्थापित कर रहा है Axios

टर्मिनल में अपना प्रोजेक्ट फ़ोल्डर खोलें और इंस्टॉल करने के लिए निम्न कमांड चलाएँ Axios: npm install axios

निम्नलिखित कोड का उपयोग करके Axios अपने घटक में आयात करें: React import axios from 'axios'

 

GET अनुरोध भेजा जा रहा है

अनुरोध भेजने GET और एपीआई से डेटा लाने के लिए, विधि का उपयोग करें। axios.get()

उदाहरण:

axios.get('https://api.example.com/data')  
  .then(response => {  
    // Handle the response data  
    console.log(response.data);  
  })  
  .catch(error => {  
    // Handle any errors  
    console.error(error);  
  });  

 

POST अनुरोध भेजा जा रहा है

अनुरोध भेजने POST और एपीआई को डेटा भेजने के लिए, विधि का उपयोग करें। axios.post()

उदाहरण:

axios.post('https://api.example.com/data', { name: 'John', age: 25 })  
  .then(response => {  
    // Handle the response data  
    console.log(response.data);  
  })  
  .catch(error => {  
    // Handle any errors  
    console.error(error);  
  });  

 

त्रुटियों को संभालना

Axios catch() विधि का उपयोग करके एक अंतर्निहित त्रुटि प्रबंधन तंत्र प्रदान करता है ।

उदाहरण:

axios.get('https://api.example.com/data')  
  .then(response => {  
    console.log(response.data);  
  })  
  .catch(error => {  
    // Handle the error  
    if(error.response) {  
      // The request was made, but the server responded with an error status code  
      console.error(error.response.data);  
    } else if(error.request) {  
      // The request was made but no response was received  
      console.error(error.request);  
    } else {  
      // Something else happened while setting up the request  
      console.error(error.message);  
    }  
  });  

 

RESTful API के साथ एकीकरण

Axios GET आपको, POST, PUT और DELETE जैसी HTTP विधियों को निर्दिष्ट करने की अनुमति देकर RESTful API का समर्थन करता है ।

उदाहरण:

// GET request with query parameters
axios.get('https://api.example.com/data', { params: { page: 1, limit: 10 } })  
  .then(response => {  
    console.log(response.data);  
  })  
  .catch(error => {  
    console.error(error);  
  });  
  
// POST request with data
axios.post('https://api.example.com/data', { name: 'John', age: 25 })  
  .then(response => {  
    console.log(response.data);  
  })  
  .catch(error => {  
    console.error(error);  
  });  
  
// PUT request to update existing data  
axios.put('https://api.example.com/data/1', { name: 'John Doe' })  
  .then(response => {  
    console.log(response.data);  
  })  
  .catch(error => {  
    console.error(error);  
  });  
  
// DELETE request to remove data  
axios.delete('https://api.example.com/data/1')  
  .then(response => {  
    console.log(response.data);  
  })  
  .catch(error => {  
    console.error(error);  
  });  

 

इन चरणों और उदाहरणों का पालन करके, आप Axios अपने React एप्लिकेशन में उपयोग किए जाने वाले एपीआई के साथ प्रभावी ढंग से संवाद करने में सक्षम होंगे।