Axios ਵਿੱਚ ਵਰਤਦੇ ਹੋਏ APIs ਨਾਲ ਸੰਚਾਰ ਕਰਨਾ React- ਇੱਕ ਕਦਮ-ਦਰ-ਕਦਮ ਗਾਈਡ

ਇੱਕ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ React, APIs ਨਾਲ ਇੰਟਰੈਕਟ ਕਰਨਾ ਇੱਕ ਆਮ ਲੋੜ ਹੈ। Axios ਇੱਕ ਪ੍ਰਸਿੱਧ JavaScript ਲਾਇਬ੍ਰੇਰੀ ਹੈ ਜੋ HTTP ਬੇਨਤੀਆਂ ਕਰਨ ਅਤੇ ਜਵਾਬਾਂ ਨੂੰ ਸੰਭਾਲਣ ਦੀ ਪ੍ਰਕਿਰਿਆ ਨੂੰ ਸਰਲ ਬਣਾਉਂਦੀ ਹੈ। ਇਹ ਕਦਮ-ਦਰ-ਕਦਮ ਗਾਈਡ ਤੁਹਾਨੂੰ APIs ਨਾਲ ਸੰਚਾਰ ਕਰਨ ਲਈ 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 APIs ਨਾਲ ਏਕੀਕ੍ਰਿਤ ਕਰਨਾ

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 ਇਹਨਾਂ ਕਦਮਾਂ ਅਤੇ ਉਦਾਹਰਣਾਂ ਦੀ ਪਾਲਣਾ ਕਰਕੇ, ਤੁਸੀਂ ਆਪਣੀ React ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਵਰਤਦੇ ਹੋਏ APIs ਨਾਲ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਢੰਗ ਨਾਲ ਸੰਚਾਰ ਕਰਨ ਦੇ ਯੋਗ ਹੋਵੋਗੇ ।