close

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 طریقوں کی وضاحت کرنے کی اجازت دے کر RESTful APIs کو سپورٹ کرتا ہے جیسے کہ GET, POST PUT، اور DELETE۔

مثال:

// 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 کے ساتھ مؤثر طریقے سے بات چیت کرنے کے قابل ہو جائیں گے۔