Axios માં નો ઉપયોગ કરીને APIs સાથે વાતચીત કરવી React- એક સ્ટેપ-બાય-સ્ટેપ ગાઈડ

એપ્લિકેશનમાં React, APIs સાથે ક્રિયાપ્રતિક્રિયા કરવી એ સામાન્ય જરૂરિયાત છે. Axios એક લોકપ્રિય JavaScript લાઇબ્રેરી છે જે HTTP વિનંતીઓ બનાવવા અને પ્રતિસાદોને હેન્ડલ કરવાની પ્રક્રિયાને સરળ બનાવે છે. આ પગલું-દર-પગલાની માર્ગદર્શિકા તમને API સાથે વાતચીત કરવા માટે Axios તમારી એપ્લિકેશનમાં ઉપયોગ કરવાની પ્રક્રિયામાં લઈ જશે. React

 

ઇન્સ્ટોલ કરી રહ્યું છે Axios

તમારા પ્રોજેક્ટ ફોલ્ડરને ટર્મિનલમાં ખોલો અને ઇન્સ્ટોલ કરવા માટે નીચેનો આદેશ ચલાવો Axios: npm install axios

નીચેના કોડનો ઉપયોગ કરીને Axios તમારા ઘટકમાં આયાત કરો: React import axios from 'axios'

 

GET વિનંતીઓ મોકલી રહ્યું છે

વિનંતી મોકલવા GET અને API માંથી ડેટા મેળવવા માટે, પદ્ધતિનો ઉપયોગ કરો. axios.get()

ઉદાહરણ:

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 વિનંતીઓ મોકલી રહ્યું છે

વિનંતી મોકલવા POST અને API ને ડેટા મોકલવા માટે, પદ્ધતિનો ઉપયોગ કરો. axios.post()

ઉદાહરણ:

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

 

હેન્ડલિંગ ભૂલો

Axios પદ્ધતિનો ઉપયોગ કરીને બિલ્ટ-ઇન એરર હેન્ડલિંગ મિકેનિઝમ પ્રદાન કરે છે catch().

ઉદાહરણ:

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

 

RESTful API સાથે સંકલન

Axios તમને HTTP પદ્ધતિઓ જેમ કે GET, POST, PUT અને DELETE નો ઉલ્લેખ કરવાની મંજૂરી આપીને RESTful API ને સપોર્ટ કરે છે.

ઉદાહરણ:

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

 

Axios આ પગલાંઓ અને ઉદાહરણોને અનુસરીને, તમે તમારી એપ્લિકેશનમાં ઉપયોગ કરીને APIs સાથે અસરકારક રીતે વાતચીત કરી શકશો React.