التواصل مع واجهات برمجة التطبيقات باستخدام Axios- React دليل خطوة بخطوة

في React التطبيق ، يعد التفاعل مع واجهات برمجة التطبيقات مطلبًا شائعًا. Axios هي JavaScript مكتبة شائعة تبسط عملية تقديم طلبات HTTP والتعامل مع الاستجابات. سيرشدك هذا الدليل التفصيلي خطوة بخطوة خلال عملية الاستخدام Axios في React تطبيقك للتواصل مع واجهات برمجة التطبيقات.

 

التثبيت Axios

افتح مجلد مشروعك في المحطة وقم بتشغيل الأمر التالي للتثبيت Axios: npm install axios

قم باستيراد المكون Axios الخاص بك React باستخدام الكود التالي: import axios from 'axios'

 

إرسال GET الطلبات

لإرسال GET طلب وجلب البيانات من واجهة برمجة التطبيقات ، استخدم الطريقة. 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 طلب وإرسال البيانات إلى واجهة برمجة التطبيقات ، استخدم الطريقة. 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 يدعم RESTful APIs من خلال السماح لك بتحديد طرق HTTP مثل 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.