عميل HTTP لـ TypeScript: نظرة عامة على أفضل المكتبات |…

عميل HTTP لـ TypeScript: أفضل المكتبات لتطبيقات الويب الحديثة

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

1. Axios — المعيار العالمي

لا يزال Axios أشهر عميل HTTP لكل من المتصفح و Node.js. ميزته الرئيسية هي الوظائف الغنية "خارج الصندوق": دعم المعترضات (interceptors)، التحويل التلقائي لـ JSON، إلغاء الطلبات، والحماية من XSRF.

في TypeScript، يتكامل Axios بشكل مثالي تقريبًا. يمكنك تحديد أنواع الاستجابات باستخدام الأدوية (generics)، مما يجعل الكود آمنًا وقابلًا للتنبؤ.

import axios, { AxiosResponse } from 'axios';

interface User {  id: number;  name: string;  email: string;}

async function fetchUser(id: number): Promise<User> {  const response: AxiosResponse<User> = await axios.get<User>(`/api/users/${id}`);  return response.data;}

// الاستخدامfetchUser(1).then(user => console.log(user.name));

الإيجابيات: مجتمع ضخم، أمثلة كثيرة، دعم تقدم التحميل، معالجة مدمجة للأخطاء.

السلبيات: حجم الحزمة (~14 KB مضغوط) قد يكون زائدًا عن الحاجة للمشاريع البسيطة.

2. Fetch API — الخيار الأصلي

أصبح Fetch API المدمج في المتصفحات في السنوات الأخيرة بديلاً كاملاً لـ XMLHttpRequest. لمطوري TypeScript، هذا يعني عدم وجود تبعيات إضافية. ومع ذلك، يتطلب Fetch الأصلي المزيد من العمل اليدوي: لا يوجد رمي تلقائي للأخطاء عند حالات 4xx/5xx، وبالنسبة لـ Node.js، هناك حاجة إلى polyfill.

interface Post {  userId: number;  id: number;  title: string;  body: string;}

async function getPosts(): Promise<Post[]> {  const response = await fetch('https://jsonplaceholder.typicode.com/posts');  if (!response.ok) {    throw new Error(`HTTP error! status: ${response.status}`);  }  return response.json() as Promise<Post[]>;}

getPosts().then(posts => console.log(posts[0].title));

الإيجابيات: حجم حزمة صفري، دعم كامل لـ Streams API، بنية قائمة على الوعود (Promise-based).

السلبيات: الحاجة للتحقق يدويًا من حالات الاستجابة، عدم وجود مهلات زمنية افتراضية، صعوبات في إلغاء الطلبات (AbortController).

3. Got — أداة قوية لـ Node.js

تم إنشاء مكتبة Got خصيصًا لبيئة الخادم Node.js. تقدم إمكانيات متقدمة: دعم HTTP/2، آليات إعادة المحاولة (retry)، التخزين المؤقت، العمل مع الكوكيز والبروكسي. بالنسبة لـ TypeScript، توفر Got كتابة أنواع ممتازة.

import got from 'got';

interface ApiResponse {  status: string;  data: {    id: number;    value: string;  };}

async function fetchData(): Promise<ApiResponse> {  const response = await got.get('https://api.example.com/data', {    responseType: 'json',    retry: { limit: 3 },    timeout: { request: 5000 }  }).json<ApiResponse>();  return response;}

fetchData().then(result => console.log(result.data.value));

الإيجابيات: API غني للسيناريوهات المعقدة، معالجة مدمجة للأخطاء، دعم التدفقات (streams)، توثيق ممتاز.

السلبيات: لا يعمل في المتصفح، حجم كبير نسبيًا (~10 KB مضغوط)، زائد عن الحاجة لطلبات GET البسيطة.