close

Sadarwa tare da APIs ta amfani Axios da React- Jagorar Mataki-by-Taki

A cikin React aikace-aikacen, hulɗa tare da APIs buƙatu ne na gama-gari. Axios sanannen JavaScript ɗakin karatu ne wanda ke sauƙaƙa aiwatar da buƙatun HTTP da sarrafa martani. Wannan jagorar mataki-mataki zai bi ku ta hanyar amfani Axios da React aikace-aikacenku don sadarwa tare da APIs.

 

Shigarwa Axios

Bude babban fayil ɗin aikin ku a cikin tashar kuma gudanar da umarni mai zuwa don shigarwa Axios: npm install axios

Shigo Axios cikin React abubuwan da kuke buƙata ta amfani da lambar mai zuwa: import axios from 'axios'

 

Aika GET Buƙatun

Don aika GET buƙatu da ɗauko bayanai daga API, yi amfani da hanyar. axios.get()

Misali:

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

 

Aika POST Buƙatun

Don aika POST buƙatu da aika bayanai zuwa API, yi amfani da hanyar. axios.post()

Misali:

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

 

Magance Kurakurai

Axios yana ba da ginanniyar hanyar sarrafa kuskure ta amfani da catch() hanyar.

Misali:

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

 

Haɗin kai tare da APIs RESTful

Axios yana goyan bayan APIs masu RESTful ta hanyar ba ku damar tantance hanyoyin HTTP kamar GET, POST, PUT, da GAME.

Misali:

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

 

Ta bin waɗannan matakai da misalan, za ku sami damar sadarwa yadda ya kamata tare da APIs ta amfani Axios da React aikace-aikacenku.