عندما يتعلق الأمر بمعالجة طلبات HTTP في JavaScript، فإن Axios و Fetch كانت منذ فترة طويلة الأدوات المفضلة. ومع ذلك، هناك بديل قوي وحديث يجب على المطورين أخذه بعين الاعتبار —  Ky. خفيف الوزن ومليء بالميزات المتقدمة، يجعل Ky التعامل مع طلبات HTTP أسهل وأكثر كفاءة. في هذه المقالة، سنوضح سبب تميز Ky، مع مقارنات مباشرة مع Axios وFetch API.

1. نظرة عامة على Ky وAxios وFetch API

أكسيوس

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

جلب واجهة برمجة التطبيقات

Fetch عبارة عن واجهة برمجة تطبيقات مضمنة في المتصفح لتقديم طلبات HTTP. على الرغم من استخدامه على نطاق واسع، فإن Fetch له بعض القيود: فهو لا يتضمن معالجة الأخطاء الافتراضية أو إعادة المحاولة المضمنة، مما يتطلب من المطورين كتابة تعليمات برمجية إضافية حتى للوظائف الأساسية.

كي

Ky هو بديل خفيف الوزن (157 ~ كيلو بايت) لـ Axios وFetch، وهو مبني على قمة Fetch ولكنه يقدم واجهة برمجة تطبيقات أكثر ثراءً بالميزات. من خلال عمليات إعادة المحاولة المضمنة، ومعالجة الأخطاء المبسطة، وخطافات الطلب القابلة للتخصيص، يحقق Ky التوازن بين البساطة والقوة.

لماذا تختار Ky؟

• خفيف الوزن : يبلغ حجمه 157 ~ كيلوبايت فقط، وهو مثالي للتطبيقات الحساسة للأداء.
• حديث: مبني على Fetch API ولكن مع إعدادات افتراضية أفضل.
• دعم إعادة المحاولة : إعادة المحاولة التلقائية للطلبات الفاشلة.
• الخطافات: معالجة سهلة للطلبات والاستجابات باستخدام خطافات beforeRequest وafterResponse.

2. لماذا Ky أفضل: الميزات والمزايا الرئيسية

خفيفة الوزن والأداء

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

واجهة برمجة تطبيقات بسيطة وميزات قوية

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

import ky from 'ky';
const data = await ky.get('https://api.example.com/data').json();

لماذا هذا أفضل من الجلب؟

• تحليل JSON التلقائي: لا حاجة لتحليل الاستجابة يدويًا.
• معالجة الأخطاء : يعرض Ky أخطاء ذات معنى لرموز HTTP مثل 404 أو 500.
• إعادة المحاولة : يقوم Ky تلقائيًا بإعادة محاولة الطلبات الفاشلة، على عكس الجلب، الذي يفشل بصمت.

إعادة المحاولة المضمنة

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

await ky.get('https://api.example.com/data', { retry: 2 });

في هذا المثال، سيعيد Ky محاولة الطلب حتى مرتين في حالة الفشل، دون أي إعداد إضافي.

3. قبل الطلب وبعد الاستجابة: قوة الخطافات في كنتاكي

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

ربط الطلب المسبق: تعزيز الطلبات بسهولة

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

مثال: إضافة رمز تفويض لكل طلب.

ky.extend({
  hooks: {
    beforeRequest: [
      request => {
        const token = localStorage.getItem('authToken');
        request.headers.set('Authorization', `Bearer ${token}`);
      }
    ]
  }
});

يؤدي هذا إلى تقليل التعليمات البرمجية المتكررة، مما يسهل التعامل مع المصادقة على مستوى العالم.

ربط afterResponse: تبسيط التعامل مع الاستجابة

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

مثال: تحديث رمز منتهي الصلاحية تلقائيًا على استجابة 401 غير مصرح بها.

ky.extend({
  hooks: {
    afterResponse: [
      async (request, options, response) => {
        if (response.status === 401) {
          const newToken = await refreshAuthToken();
          request.headers.set('Authorization', `Bearer ${newToken}`);
          return ky(request);
        }
      }
    ]
  }
});

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

4. معالجة الأخطاء: Ky vs Axios vs Fetch API

أكسيوس

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

جلب واجهة برمجة التطبيقات

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

كي

كي يتفوق في معالجة الأخطاء. يقوم تلقائيًا بإلقاء أخطاء لاستجابات HTTP غير 2xx ويوفر وظيفة إعادة المحاولة للطلبات الفاشلة دون الحاجة إلى تعليمات برمجية إضافية. وهذا يجعل Ky حلاً قويًا للتعامل مع الأخطاء بشكل أنيق.

try {
  const data = await ky.get('https://api.example.com/data').json();
} catch (error) {
  console.error('Request failed:', error);
}

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

5. أمثلة عملية: Ky في العمل

دعونا نختبر Ky من خلال بعض الأمثلة العملية التي توضح بساطته وقوته.

المثال 1: تقديم طلب GET

const response = await ky.get('https://api.example.com/items').json();
console.log(response);

يتعامل Ky تلقائيًا مع تحليل JSON ويطرح خطأ لأي رموز حالة غير 2xx، وهو ما لا يحدثه الجلب.

مثال 2: طلب النشر مع إعادة المحاولة

const response = await ky.post('https://api.example.com/create', {
  json: { name: 'Ky' },
  retry: 3
}).json();
console.log(response);

يعيد Ky محاولة طلب POST حتى 3 مرات في حالة فشله، مما يوفر موثوقية أفضل من Fetch أو Axios بدون تكوين إضافي.

6. الخلاصة: هل تستحق Ky التبديل؟

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

بالنسبة للمطورين الذين يمنحون الأولوية البساطة، والأداء، والتحكم على طلبات HTTP، فمن المؤكد أن Ky تستحق النظر إليها كأداة أساسية في مشاريع JavaScript الخاصة بك.

لمزيد من الأمثلة والمعلومات التفصيلية عن واجهة برمجة التطبيقات، يمكنك زيارة https://www.npmjs.com/package/ky.