Axios मध्ये वापरून API सह संप्रेषण करणे React- चरण-दर-चरण मार्गदर्शक

अनुप्रयोगामध्ये React, API सह संवाद साधणे ही एक सामान्य आवश्यकता आहे. Axios हे एक लोकप्रिय JavaScript लायब्ररी आहे जे HTTP विनंत्या आणि प्रतिसाद हाताळण्याची प्रक्रिया सुलभ करते. हे चरण-दर-चरण मार्गदर्शक तुम्हाला API सह संप्रेषण करण्यासाठी Axios तुमच्या अनुप्रयोगामध्ये वापरण्याच्या प्रक्रियेतून मार्गदर्शन करेल. React

 

स्थापित करत आहे Axios

टर्मिनलमध्ये तुमचे प्रोजेक्ट फोल्डर उघडा आणि इन्स्टॉल करण्यासाठी खालील कमांड चालवा Axios: npm install axios

खालील कोड वापरून Axios तुमच्या घटकामध्ये आयात करा: React import axios from 'axios'

 

GET विनंत्या पाठवत आहे

विनंती पाठवण्यासाठी GET आणि API वरून डेटा आणण्यासाठी, पद्धत वापरा. 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 आणि API ला डेटा पाठवण्यासाठी, पद्धत वापरा. 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 तुम्हाला HTTP पद्धती जसे की GET, POST, PUT आणि DELETE निर्दिष्ट करण्याची परवानगी देऊन 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 या चरणांचे आणि उदाहरणांचे अनुसरण करून, तुम्ही तुमच्या ऍप्लिकेशनमध्ये वापरून API सह प्रभावीपणे संवाद साधण्यास सक्षम असाल React.