close

Cumarsáid le APIs ag baint úsáide as Axios i React- Treoir Céim ar Chéim

In React iarratas, is riachtanas coitianta é idirghníomhú le APIanna. Axios leabharlann mhóréilimh JavaScript a shimplíonn an próiseas chun iarratais HTTP a dhéanamh agus freagraí a láimhseáil. Tabharfaidh an treoir céim ar chéim seo tú tríd an bpróiseas úsáide Axios i d' React iarratas chun cumarsáid a dhéanamh le APInna.

 

Suiteáil Axios

Oscail do fhillteán tionscadail sa teirminéal agus rith an t-ordú seo a leanas chun é a shuiteáil Axios: npm install axios

Iompórtáil Axios i do React chomhpháirt leis an gcód seo a leanas: import axios from 'axios'

 

Iarratais a GET Sheoladh

Chun GET iarratas a sheoladh agus sonraí a fháil ó API, úsáid an modh. axios.get()

Sampla:

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

 

Iarratais a POST Sheoladh

Chun POST iarratas a sheoladh agus sonraí a sheoladh chuig API, úsáid an modh. axios.post()

Sampla:

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

 

Earráidí a Láimhseáil

Axios soláthraíonn sé meicníocht láimhseála earráide ionsuite ag baint úsáide as an catch() modh.

Sampla:

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

 

Comhtháthú le RESTful APIs

Axios tacaíonn sé le RESTful APIs trí chead a thabhairt duit modhanna HTTP a shonrú mar GET, , POST, PUT, agus DELETE.

Sampla:

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

 

Trí na céimeanna agus na samplaí seo a leanúint, beidh tú in ann cumarsáid éifeachtach a dhéanamh le APIanna a úsáideann Axios i d' React iarratas.