Komuniciranje z API-ji z ​​uporabo Axios v React – vodnik po korakih

V React aplikaciji je interakcija z API-ji pogosta zahteva. Axios je priljubljena JavaScript knjižnica, ki poenostavi postopek izdelave zahtev HTTP in obravnavanje odgovorov. Ta vodnik po korakih vas bo vodil skozi postopek uporabe Axios v vaši React aplikaciji za komunikacijo z API-ji.

 

Namestitev Axios

Odprite mapo projekta v terminalu in zaženite naslednji ukaz za namestitev Axios: npm install axios

Uvozite Axios svojo React komponento z naslednjo kodo: import axios from 'axios'

 

Pošiljanje GET zahtev

Če želite poslati GET zahtevo in pridobiti podatke iz API-ja, uporabite metodo. axios.get()

primer:

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

 

Pošiljanje POST zahtev

Če želite poslati POST zahtevo in podatke v API, uporabite metodo. axios.post()

primer:

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

 

Ravnanje z napakami

Axios zagotavlja vgrajen mehanizem za obravnavanje napak z uporabo catch() metode.

primer:

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

 

Integracija z API-ji RESTful

Axios podpira API-je RESTful, tako da vam omogoča, da določite metode HTTP, kot so GET, POST, PUT in DELETE.

primer:

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

 

Če sledite tem korakom in primerom, boste lahko učinkovito komunicirali z API-ji, ki jih uporabljate Axios v svoji React aplikaciji.