Komunikimi me API-të duke përdorur Axios në React- Një udhëzues hap pas hapi

Në një React aplikacion, ndërveprimi me API-të është një kërkesë e zakonshme. Axios është një JavaScript bibliotekë e njohur që thjeshton procesin e bërjes së kërkesave HTTP dhe trajtimin e përgjigjeve. Ky udhëzues hap pas hapi do t'ju përcjellë në procesin e përdorimit në aplikacionin Axios tuaj për të komunikuar me API-të. React

 

Instalimi Axios

Hapni dosjen tuaj të projektit në terminal dhe ekzekutoni komandën e mëposhtme për ta instaluar Axios: npm install axios

Importoni Axios në komponentin tuaj React duke përdorur kodin e mëposhtëm: import axios from 'axios'

 

Dërgimi i GET Kërkesave

Për të dërguar një GET kërkesë dhe për të marrë të dhëna nga një API, përdorni metodën. axios.get()

Shembull:

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);  
  });  

 

Dërgimi i POST Kërkesave

Për të dërguar një POST kërkesë dhe për të dërguar të dhëna në një API, përdorni metodën. axios.post()

Shembull:

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);  
  });  

 

Trajtimi i gabimeve

Axios ofron një mekanizëm të integruar për trajtimin e gabimeve duke përdorur catch() metodën.

Shembull:

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);  
    }  
  });  

 

Integrimi me API-të RESTful

Axios mbështet API-të RESTful duke ju lejuar të specifikoni metodat HTTP si GET, POST, PUT dhe DELETE.

Shembull:

// 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);  
  });  

 

Duke ndjekur këto hapa dhe shembuj, do të jeni në gjendje të komunikoni në mënyrë efektive me API-të duke përdorur Axios në aplikacionin tuaj React.