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

مرحبًا! إذا كنت مطورًا، فمن المحتمل أنك مررت بتلك اللحظات التي تحتاج فيها إلى إجراء عدة مكالمات API في مشاريعك. هذه ليست أهم أجزاء البرمجة، لكنها ضرورية. اليوم، سنغوص عميقًا في مكالمات متعددة باستخدام Axios، وهي طريقة قوية لمعالجة هذه المهمة بكفاءة.

لكن انتظر، قبل أن نبدأ، إليك نصيحة سريعة: إذا كنت تبحث عن أداة API قوية لتبسيط عملية تطويرك، تحقق من Apidog. إنها مجانية ومليئة بالميزات التي ستجعل حياتك أسهل بكثير.

الآن، لنبدأ بأيدينا ونفحص التفاصيل الدقيقة لعمل مكالمات متعددة باستخدام Axios!

ما هو Axios؟

أولاً وقبل كل شيء، دعنا نتحدث عما هو Axios. Axios هو عميل HTTP شهير قائم على الوعود لجافا سكريبت. يتم استخدامه لإجراء طلبات HTTP من المتصفح و Node.js، ويُقدر بشكل خاص لسهولة استخدامه ومرونته. باستخدام Axios، يمكنك بسهولة إرسال طلبات HTTP غير متزامنة إلى نقاط نهاية REST وإجراء عمليات CRUD.

لماذا نستخدم Axios لإجراء مكالمات متعددة؟

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

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

• API قائمة على الوعود: يجعل التعامل مع الطلبات غير المتزامنة سهلاً.
• دعم مدمج للمكالمات المتزامنة: باستخدام axios.all و axios.spread.
• المعترضات: للتعامل مع تحويلات الطلب والاستجابة.
• التعامل مع الأخطاء: يبسط إدارة أنواع مختلفة من الأخطاء.

البدء مع Axios

قبل أن نغوص في المكالمات المتعددة، دعنا نتأكد من أننا على نفس الصفحة مع أساسيات Axios.

تثبيت Axios

أولاً، تحتاج إلى تثبيت Axios. إذا كنت تستخدم npm، يمكنك القيام بذلك باستخدام:

npm install axios

أو، إذا كنت تفضل yarn:

yarn add axios

طلب Axios الأساسي

إليك مثال سريع على طلب GET أساسي باستخدام Axios:

import axios from 'axios';

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('خطأ في جلب البيانات:', error);
  });

هذا الجزء البسيط يجلب البيانات من عنوان URL المعطى ويسجلها في وحدة التحكم. إذا كان هناك خطأ، فإنه يسجل رسالة الخطأ.

إجراء مكالمات متعددة باستخدام Axios

الآن، دعنا ننتقل إلى الموضوع الرئيسي: إجراء مكالمات متعددة باستخدام Axios. هناك عدة طرق للتعامل مع ذلك، اعتمادًا على احتياجاتك.

استخدام axios.all و axios.spread

أكثر الطرق شيوعًا للتعامل مع المكالمات المتعددة هي استخدام axios.all و axios.spread. تساعدك هذه الوظائف على إدارة المكالمات المتزامنة والتعامل مع استجاباتها بطريقة نظيفة ومنظمة.

إليك مثال:

import axios from 'axios';

function getData() {
  const requestOne = axios.get('https://api.example.com/data1');
  const requestTwo = axios.get('https://api.example.com/data2');

  axios.all([requestOne, requestTwo])
    .then(axios.spread((responseOne, responseTwo) => {
      console.log('البيانات من الطلب الأول:', responseOne.data);
      console.log('البيانات من الطلب الثاني:', responseTwo.data);
    }))
    .catch(errors => {
      console.error('خطأ في جلب البيانات:', errors);
    });
}

getData();

في هذا المثال، تأخذ axios.all مصفوفة من الوعود (طلبات HTTP الخاصة بنا) وتنتظر حتى تحقق جميعها. ثم تأخذ وظيفة axios.spread الاستجابات وتوزعها على معطيات فردية، مما يجعل من السهل التعامل مع كل استجابة.

التعامل مع الطلبات الديناميكية

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

import axios from 'axios';

function fetchData(endpoints) {
  const requests = endpoints.map(endpoint => axios.get(endpoint));

  axios.all(requests)
    .then(axios.spread((...responses) => {
      responses.forEach((response, index) => {
        console.log(`البيانات من الطلب ${index + 1}:`, response.data);
      });
    }))
    .catch(errors => {
      console.error('خطأ في جلب البيانات:', errors);
    });
}

const apiEndpoints = [
  'https://api.example.com/data1',
  'https://api.example.com/data2',
  'https://api.example.com/data3'
];

fetchData(apiEndpoints);

في هذا السيناريو، نقوم بتحديد مصفوفة النقاط النهائية لإنشاء مصفوفة من الوعود. هذه طريقة قوية للتعامل مع قوائم ديناميكية من مكالمات API.

طلبات متسلسلة مع Axios

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

import axios from 'axios';

function fetchSequentialData() {
  axios.get('https://api.example.com/data1')
    .then(response1 => {
      console.log('بيانات الطلب الأول:', response1.data);
      return axios.get('https://api.example.com/data2');
    })
    .then(response2 => {
      console.log('بيانات الطلب الثاني:', response2.data);
    })
    .catch(error => {
      console.error('خطأ في جلب البيانات:', error);
    });
}

fetchSequentialData();

تضمن هذه الطريقة أن يبدأ الطلب الثاني فقط بعد أن ينتهي الأول بنجاح.

التعامل مع الأخطاء في المكالمات المتعددة

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

التقاط الأخطاء للطلبات الفردية

يمكنك التعامل مع الأخطاء لكل طلب على حدى عن طريق إضافة كتلة .catch لكل وعد:

import axios from 'axios';

const requestOne = axios.get('https://api.example.com/data1')
  .catch(error => console.error('خطأ في الطلب الأول:', error));

const requestTwo = axios.get('https://api.example.com/data2')
  .catch(error => console.error('خطأ في الطلب الثاني:', error));

axios.all([requestOne, requestTwo])
  .then(axios.spread((responseOne, responseTwo) => {
    if (responseOne) console.log('البيانات من الطلب الأول:', responseOne.data);
    if (responseTwo) console.log('البيانات من الطلب الثاني:', responseTwo.data);
  }));

التقاط جميع الأخطاء معًا

بدلاً من ذلك، يمكنك التقاط جميع الأخطاء معًا في النهاية:

import axios from 'axios';

const requestOne = axios.get('https://api.example.com/data1');
const requestTwo = axios.get('https://api.example.com/data2');

axios.all([requestOne, requestTwo])
  .then(axios.spread((responseOne, responseTwo) => {
    console.log('البيانات من الطلب الأول:', responseOne.data);
    console.log('البيانات من الطلب الثاني:', responseTwo.data);
  }))
  .catch(error => {
    console.error('خطأ في جلب البيانات:', error);
  });

هذه الطريقة أبسط لكن أقل تفصيلًا، حيث إنها لا تميز الطلب الذي فشل.

تحسين طلبات Axios

لتحقيق أقصى استفادة من Axios، إليك بعض النصائح وأفضل الممارسات.

استخدام المعترضات

تسمح لك المعترضات بتشغيل كودك أو تعديل الطلبات/الاستجابات قبل معالجتها بواسطة then أو catch. إنها رائعة لإضافة رؤوس، وتسجيل الدخول، والتعامل مع الأخطاء، إلخ.

import axios from 'axios';

// إضافة معترض طلب
axios.interceptors.request.use(request => {
  console.log('بدء الطلب', request);
  return request;
}, error => {
  return Promise.reject(error);
});

// إضافة معترض استجابة
axios.interceptors.response.use(response => {
  console.log('الاستجابة:', response);
  return response;
}, error => {
  return Promise.reject(error);
});

تعيين القيم الافتراضية العالمية

يمكنك تعيين خيارات تكوين افتراضية لـ Axios. قد تكون هذه مفيدة لتعيين عناوين URL الأساسية، والرؤوس، وأوقات الانتظار، إلخ.

import axios from 'axios';

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = 'Bearer token';
axios.defaults.timeout = 10000;

إلغاء الطلبات

أحيانًا، قد تحتاج إلى إلغاء طلب. يوفر Axios طريقة لإلغاء الطلبات باستخدام CancelToken.

import axios from 'axios';

const CancelToken = axios.CancelToken;
let cancel;

axios.get('https://api.example.com/data', {
  cancelToken: new CancelToken(function executor(c) {
    cancel = c;
  })
})
  .then(response => {
    console.log(response.data);
  })
  .catch(thrown => {
    if (axios.isCancel(thrown)) {
      console.log('تم إلغاء الطلب', thrown.message);
    } else {
      console.error('خطأ في جلب البيانات:', thrown);
    }
  });

// لإلغاء الطلب
cancel('تم إلغاء العملية بواسطة المستخدم.');

مثال من العالم الحقيقي: جلب البيانات من عدة APIs

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

import axios from 'axios';

async function fetchDashboardData() {
  try {
    const [userData, postsData, commentsData] = await axios.all([
      axios.get('https://api.example.com/users'),
      axios.get('https://api.example.com/posts'),
      axios.get('https://api.example.com/comments')
    ]);

    console.log('بيانات المستخدم:', userData.data);
    console.log('بيانات المشاركات:', postsData.data);
    console.log('بيانات التعليقات:', commentsData.data);
  } catch (errors) {
    console.error('خطأ في جلب بيانات اللوحة:', errors);
  }
}

fetchDashboardData();

في هذا المثال، نستخدم axios.all لجلب البيانات من ثلاثة نقاط نهاية مختلفة في وقت واحد. ثم نقوم بمعالجة الاستجابات معًا، ونسجل البيانات في وحدة التحكم.

Apidog: أداة مجانية لتوليد كود Axios الخاص بك

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

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

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

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

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

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

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

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

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

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

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

الخاتمة

يعد التعامل مع طلبات API المتعددة بكفاءة أمرًا حاسمًا لبناء تطبيقات ويب قوية وعالية الأداء. يجعل Axios، بميزاته القوية ومرونته، هذه المهمة بسيطة وقابلة للإدارة. من خلال الاستفادة من axios.all و axios.spread، والمعترضات، وميزات متقدمة أخرى، يمكنك إنشاء تدفقات عمل سلسة وفعالة لجلب البيانات في تطبيقاتك.

لا تنس، إذا كنت ترغب في تسريع تطوير API الخاص بك، قم بتحميل Apidog مجانًا واستكشف مجموعة ميزاته الغنية. إنها تغيير قواعد اللعبة لأي مطور يعمل مع APIs.