Bendravimas su API naudojant Axios – React Žingsnis po žingsnio vadovas

Programoje React bendravimas su API yra įprastas reikalavimas. Axios yra populiari JavaScript biblioteka, supaprastinanti HTTP užklausų teikimo ir atsakymų tvarkymo procesą. Šiame nuosekliame vadove sužinosite, kaip naudoti Axios programoje React ryšį su API.

 

Diegimas Axios

Atidarykite projekto aplanką terminale ir paleiskite šią komandą, kad įdiegtumėte Axios: npm install axios

Importuokite Axios į savo React komponentą naudodami šį kodą: import axios from 'axios'

 

GET Prašymų siuntimas

Norėdami išsiųsti GET užklausą ir gauti duomenis iš API, naudokite metodą. axios.get()

Pavyzdys:

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 Prašymų siuntimas

Norėdami išsiųsti POST užklausą ir siųsti duomenis į API, naudokite metodą. axios.post()

Pavyzdys:

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

 

Tvarkymo klaidos

Axios suteikia integruotą klaidų valdymo mechanizmą naudojant catch() metodą.

Pavyzdys:

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

 

Integravimas su RESTful API

Axios palaiko RESTful API, leisdamas nurodyti HTTP metodus, tokius kaip GET, POST, PUT ir DELETE.

Pavyzdys:

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

 

Vykdydami šiuos veiksmus ir pavyzdžius galėsite efektyviai bendrauti su Axios savo React programoje naudojamomis API.