Axios இன் React- ஒரு படி-படி-படி வழிகாட்டியைப் பயன்படுத்தி APIகளுடன் தொடர்புகொள்வது

ஒரு 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.