Axios ఉపయోగించి APIలతో కమ్యూనికేట్ చేయడం React- దశల వారీ మార్గదర్శి

అప్లికేషన్‌లో React, APIలతో పరస్పర చర్య చేయడం ఒక సాధారణ అవసరం. HTTP అభ్యర్థనలు మరియు ప్రతిస్పందనలను నిర్వహించే ప్రక్రియను సులభతరం చేసే Axios ప్రసిద్ధ లైబ్రరీ. JavaScript ఈ దశల వారీ గైడ్ 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 GET, , PUT మరియు DELETE వంటి HTTP పద్ధతులను పేర్కొనడానికి మిమ్మల్ని అనుమతించడం ద్వారా RESTful APIలకు మద్దతు ఇస్తుంది POST.

ఉదాహరణ:

// 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.