كيفية إجراء طلبات HTTP باستخدام Axios في عام 2024

Axios هي مكتبة جافا سكريبت شعبية تسهل عملية إجراء طلبات HTTP من تطبيق ويب. إنها توفر واجهة سهلة الاستخدام لإرسال واستقبال البيانات من واجهات برمجة التطبيقات (APIs)، وهي مستخدمة على نطاق واسع من قبل المطورين حول العالم.

في هذه التدوينة، سنناقش كيفية إجراء طلبات HTTP باستخدام Axios، المكتبة الشهيرة لجافا سكريبت، وسنوفر عينات من التعليمات البرمجية لعرض كيفية استخدامها، ثم سنقدم بعض النصائح والحيل لتوليد التعليمات البرمجية الخاصة بك باستخدام Apidog.

💡

ستبسط Apidog عملية توليد واختبار واجهات برمجة التطبيقات، وسيكون تطويرك أكثر كفاءة، لذلك انقر على زر التنزيل أدناه لاستخدام Apidog بشكل مجاني تمامًا.

button

سواء كنت مطورًا متمرسًا أو مبتدئًا في تطوير الويب، ستوفر لك هذه التدوينة المعرفة التي تحتاج إليها لاستخدام Axios بشكل فعال وكفء. لذا، دعنا نبدأ!

ما هو Axios؟

Axios هي مكتبة جافا سكريبت تتيح لك إجراء طلبات HTTP من شفرتك جافا سكريبت. إنها مكتبة تعتمد على الوعود (promise) توفر واجهة سهلة الاستخدام لإجراء طلبات HTTP. تُستخدم Axios على نطاق واسع في مجتمع جافا سكريبت وتُعرف بكونها بسيطة ومرنة. Axios هي واجهة برمجة تطبيقات HTTP للعميل تعتمد على واجهة XMLHttpRequest التي تقدمها المتصفحات.

لماذا تستخدم Axios؟

توفر Axios عدة مزايا على المكتبات الأخرى الخاصة بـ HTTP. إليك بعض الأسباب التي تجعلك تستخدم Axios:

تعتمد على الوعود: تعتمد Axios على الوعود، مما يسهل التعامل مع العمليات غير المتزامنة. وهذا يعني أنه يمكنك استخدام بناء جملة async/await لجعل شيفرتك أكثر قابلية للقراءة وأسهل في الصيانة.
واجهة بسيطة وبديهية: توفر Axios واجهة بسيطة وبديهية لإجراء طلبات HTTP. يمكنك استخدام طرق axios.get()، axios.post()، axios.put()، وaxios.delete() لإجراء طلبات GET و POST و PUT و DELETE على التوالي.
تحويل بيانات JSON تلقائي: تقوم Axios بتحويل بيانات JSON تلقائيًا، مما يسهل العمل مع واجهات برمجة التطبيقات التي ترجع بيانات JSON.
دعم لمتصفحات قديمة: توفر Axios عدة ميزات تجعل من السهل العمل مع المتصفحات القديمة. على سبيل المثال، توفر دعمًا لـ XMLHttpRequest، والذي يستخدمه المتصفحات القديمة لإجراء طلبات HTTP.
إعدادات افتراضية جيدة: تمتلك Axios إعدادات افتراضية جيدة للعمل مع بيانات JSON. على عكس البدائل مثل Fetch API، غالبًا لا تحتاج إلى ضبط رؤوسك أو إجراء مهام شاقة مثل تحويل جسم الطلب الخاص بك إلى سلسلة JSON.
معالجة أخطاء أفضل: تطرح Axios أخطاء من نطاق 400 و 500 لك. على عكس Fetch API، حيث يتعين عليك التحقق من رمز الحالة ورمي الخطأ بنفسك.
المعترضات: توفر Axios معترضات تسمح لك باعتراض الطلبات أو الاستجابات قبل التعامل معها بواسطة then أو catch.

تثبيت Axios

لتثبيت Axios، يمكنك استخدام مدير حزم Node.js (npm) أو yarn. إليك كيفية تثبيت Axios باستخدام npm:

npm install axios

وهنا كيفية تثبيت Axios باستخدام yarn:

yarn add axios

إذا كنت تفضل استخدام pnpm، يمكنك تثبيت Axios باستخدام الأمر التالي:

pnpm install axios

بدلاً من ذلك، يمكنك استخدام شبكة توصيل المحتوى (CDN) لتضمين Axios في مشروعك. إليك كيفية تضمين Axios باستخدام CDN:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

بمجرد تثبيت Axios، يمكنك البدء في إجراء طلبات HTTP باستخدامه. توفر Axios واجهة بسيطة وبديهية لإجراء طلبات HTTP. يمكنك استخدام طرق axios.get()، axios.post()، axios.put()، وaxios.delete() لإجراء طلبات GET و POST و PUT و DELETE على التوالي.

إجراء طلبات HTTP باستخدام Axios

الآن بعد أن قمنا بتثبيت Axios، لنلقِ نظرة على كيفية إجراء طلبات HTTP باستخدام Axios. توفر Axios عدة طرق لإجراء طلبات HTTP، بما في ذلك GET و POST و PUT و DELETE.

كيفية إجراء طلب GET باستخدام Axios

إرسال طلب HTTP باستخدام Axios هو أمر بسيط؛ ما عليك سوى تمرير كائن التكوين إلى دالة axios. لإرسال طلب GET باستخدام Axios، يمكنك استخدام طريقة axios.get(). فيما يلي مثال على كيفية استخدامه:

axios.get('https://your-api-endpoint.com')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

في هذا المثال، يتم استخدام axios.get() لإرسال طلب GET إلى نقطة نهاية واجهة برمجة التطبيقات المحددة. تُستخدم طريقة .then() للتعامل مع الاستجابة من الخادم، بينما تُستخدم طريقة .catch() للتعامل مع أي أخطاء قد تحدث أثناء الطلب.

إذا كنت بحاجة إلى تمرير معلمات مع طلب GET الخاص بك، يمكنك القيام بذلك عن طريق إضافتها إلى عنوان URL. على سبيل المثال:

axios.get('https://your-api-endpoint.com?param1=value1&param2=value2')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

هنا، param1 و param2 هما أسماء المعلمات التي يتم تمريرها، بينما value1 و value2 هما قيمهما المعنية.

إرسال طلب POST باستخدام Axios

عندما تستخدم Axios لإنشاء طلب POST، يمكنك "نشر" البيانات إلى نقطة نهاية معينة وتحفيز الأحداث. لإجراء طلب POST باستخدام Axios، يمكنك استخدام طريقة axios.post(). إليك مثال:

axios.post('https://api.example.com/data', {
    firstName: 'جون',
    lastName: 'دو'
  })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

في هذا المثال، نقوم بإرسال طلب POST إلى https://api.example.com/data. نقوم أيضًا بإرسال بعض البيانات مع الطلب. عندما يكتمل الطلب، نقوم بتسجيل بيانات الاستجابة على وحدة التحكم. إذا كان هناك خطأ، نقوم بتسجيل الخطأ على وحدة التحكم.

إجراء طلب PUT باستخدام Axios

لإجراء طلب PUT باستخدام Axios، يمكنك استخدام طريقة axios.put(). إليك مثال على كيفية استخدامها:

axios.put('/api/article/123', {
  title: 'إجراء طلبات PUT باستخدام Axios',
  status: 'تم النشر'
})
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

في هذا المثال، يتم استخدام axios.put() لإرسال طلب PUT إلى نقطة نهاية واجهة برمجة التطبيقات المحددة. تُستخدم طريقة .then() للتعامل مع الاستجابة من الخادم، بينما تُستخدم طريقة .catch() للتعامل مع أي أخطاء قد تحدث أثناء الطلب.

إذا كنت بحاجة إلى تمرير معلمات مع طلب PUT الخاص بك، يمكنك القيام بذلك عن طريق تضمينها في جسم الطلب. على سبيل المثال:

axios.put('/api/article/123', {
  title: 'إجراء طلبات PUT باستخدام Axios',
  status: 'تم النشر',
  param1: 'value1',
  param2: 'value2'
})
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

هنا، param1 و param2 هما أسماء المعلمات التي يتم تمريرها، بينما value1 و value2 هما قيمهما المعنية.

كيفية إرسال طلب DELETE باستخدام Axios؟

لإرسال طلب DELETE باستخدام Axios، يمكنك استخدام طريقة axios.delete(). إليك مثال على كيفية استخدامها:

axios.delete('/api/article/123')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

في هذا المثال، يتم استخدام axios.delete() لإرسال طلب DELETE إلى نقطة نهاية واجهة برمجة التطبيقات المحددة. تُستخدم طريقة .then() للتعامل مع الاستجابة من الخادم، بينما تُستخدم طريقة .catch() للتعامل مع أي أخطاء قد تحدث أثناء الطلب.

إذا كنت بحاجة إلى تمرير معلمات مع طلب DELETE الخاص بك، يمكنك القيام بذلك عن طريق تضمينها في جسم الطلب. على سبيل المثال:

axios.delete('/api/article/123', {
  data: {
    param1: 'value1',
    param2: 'value2'
  }
})
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

هنا، param1 و param2 هما أسماء المعلمات التي يتم تمريرها، بينما value1 و value2 هما قيمهما المعنية.

استخدام Axios مع async و await

async و await هي كلمات رئيسية في جافا سكريبت تتيح لك كتابة شيفرة غير متزامنة بأسلوب متزامن. عند استخدام async و await مع Axios، يمكنك كتابة شيفرة أنظف وأسهل قراءة.

للاستخدام Axios مع async و await، يمكنك استخدام طرق axios.get()، axios.put()، و axios.delete(). إليك أمثلة على كيفية استخدامها:

async function getData() {
  try {
    const response = await axios.get('https://your-api-endpoint.com');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

async function putData() {
  try {
    const response = await axios.put('/api/article/123', {
      title: 'إجراء طلبات PUT باستخدام Axios',
      status: 'تم النشر'
    });
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

async function deleteData() {
  try {
    const response = await axios.delete('/api/article/123', {
      data: {
        param1: 'value1',
        param2: 'value2'
      }
    });
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

في هذه الأمثلة، يتم استخدام axios.get() و axios.put() و axios.delete() لإرسال طلبات GET و PUT و DELETE إلى نقاط نهاية واجهة برمجة التطبيقات المحددة، على التوالي. يتم استخدام كتلة try للتعامل مع الاستجابة من الخادم، بينما تُستخدم كتلة catch للتعامل مع أي أخطاء قد تحدث أثناء الطلب.

إذا كنت بحاجة إلى تمرير معلمات مع طلب GET أو DELETE الخاص بك، يمكنك القيام بذلك عن طريق إضافتها إلى عنوان URL أو تضمينها في جسم الطلب، على التوالي. على سبيل المثال:

async function getDataWithParams() {
  try {
    const response = await axios.get('https://your-api-endpoint.com?param1=value1&param2=value2');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

async function deleteDataWithParams() {
  try {
    const response = await axios.delete('/api/article/123', {
      data: {
        param1: 'value1',
        param2: 'value2'
      }
    });
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

عندما تستخدم بناء جملة async و await، فإنه من المعتاد أن تضم شيفرتك داخل كتلة try-catch. تضمن هذه الطريقة أنك تتعامل مع الأخطاء بشكل فعال وتقدم ملاحظات لتحسين تجربة المستخدم.

Apidog: أداة مجانية لتوليد شفرتك Axios

Apidog هي منصة تطوير واجهات برمجة التطبيقات التعاونية الشاملة التي توفر مجموعة أدوات شاملة لتصميم وتصحيح واختبار ونشر وتقليد واجهات برمجة التطبيقات. يمكّن Apidogك من إنشاء شفرة Axios تلقائيًا لإجراء طلبات HTTP.

button

إليك العملية لاستخدام Apidog لتوليد شفرة Axios:

الخطوة 1: افتح Apidog واختر طلبًا جديدًا

الخطوة 2: أدخل عنوان URL لنقطة نهاية واجهة برمجة التطبيقات التي تريد إرسال طلب إليها، أدخل أي رؤوس أو معلمات سلسلة استعلام ترغب في تضمينها مع الطلب، ثم انقر فوق "تصميم" للانتقال إلى واجهة تصميم Apidog.

الخطوة 3: اختر "توليد شفرة العميل" لتوليد شفرتك.

الخطوة 4: انسخ الشفرة المتولدة باستخدام Axios والصقها في مشروعك.

استخدام Apidog لإرسال طلبات HTTP

Apidog تقدم العديد من الميزات المتقدمة التي تعزز قدرتها على اختبار طلبات HTTP بشكل أكبر. تتيح لك هذه الميزات تخصيص طلباتك والتعامل مع سيناريوهات أكثر تعقيدًا بسهولة.

button

الخطوة 1: افتح Apidog وأنشئ طلبًا جديدًا .

الخطوة 2: ابحث أو أدخل يدويًا تفاصيل واجهة برمجة التطبيقات لطلب POST الذي تريد إجراؤه.

الخطوة 3: املأ المعلمات المطلوبة وأي بيانات تريد تضمينها في جسم الطلب.

الخاتمة

تعتبر Axios موضع تقدير كبير من قبل المطورين لسبب وجيه. في هذه المقالة، تناولنا كيفية استخدام Axios لإجراء طلبات HTTP. قمنا بتغطية الأساسيات الخاصة بـ Axios، بما في ذلك ما هي، ولماذا يجب عليك استخدامها، وكيفية تثبيتها.

من خلال فهم كيفية إجراء طلبات HTTP باستخدام Axios، يمكنك تعزيز تطبيقات الويب الخاصة بك. بمساعدة Axios وأدوات مثل Apidog، يمكنك تبسيط عملية إجراء طلبات HTPP والتركيز على بناء تطبيقات قوية وفعالة.

استخدام Apidog لا يوفر لك الوقت والجهد الثمينين فحسب، بل يضمن أيضًا أن يكون رمزك دقيقًا وخاليًا من الأخطاء. مع واجهته سهلة الاستخدام وميزاته البديهية، يعد Apidog أداة لا غنى عنها لأي مطور يعمل على طلبات Axios.

button