عميل HTTP لـ TypeScript: أفضل المكتبات

عميل HTTP لـ TypeScript: مراجعة كاملة لأفضل المكتبات

في تطوير الويب الحديث باستخدام TypeScript، يعد التفاعل مع واجهات برمجة التطبيقات (API) عن بُعد مهمة أساسية. يؤثر اختيار عميل HTTP المناسب بشكل مباشر على الأداء، وقابلية قراءة الكود، وسهولة التصحيح. في هذه المقالة، سنستعرض خمسًا من أفضل المكتبات لتنفيذ طلبات HTTP في TypeScript، وميزاتها، وأمثلة على استخدامها، وتوصيات للاختيار.

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

Axios لا يزال عميل HTTP الأكثر شيوعًا في بيئة TypeScript. يوفر واجهة برمجة تطبيقات (API) مريحة قائمة على الـ Promises، وتحويلًا تلقائيًا لـ JSON، ودعمًا مدمجًا للمعترضات (interceptors).

الميزات الرئيسية:

دعم المتصفحات و Node.js (مباشر من الصندوق)
تحليل تلقائي لاستجابات JSON
إلغاء الطلبات عبر CancelToken أو AbortController
حماية من XSRF
تحديد أنواع كامل لـ TypeScript

مثال على الاستخدام مع TypeScript:

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>(    `https://jsonplaceholder.typicode.com/users/${id}`  );  return response.data;}

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

يعتبر Axios مثاليًا للمشاريع الكبيرة التي تتطلب ضبطًا دقيقًا للطلبات ومعالجة الأخطاء.

2. Fetch API — النهج الأصلي

إن Fetch API الحديث مدمج في جميع المتصفحات و Node.js (من الإصدار 18). إنه خفيف الوزن، ولا يتطلب تثبيت حزم إضافية، ولكنه يتطلب معالجة يدوية للأخطاء والتحليل.

المزايا:

عدم وجود تبعيات
دعم التدفقات (Streams) و Service Workers
تكامل أصلي مع TypeScript عبر الـ generics

مثال مع TypeScript:

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

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

getPost(1).then(post => console.log(post.title));

يوصى به للمشاريع الصغيرة أو عندما تحتاج إلى تقليل حجم الحزمة (bundle).

3. Ky — البساطة والراحة

Ky هو غلاف خفيف الوزن حول Fetch API، تم إنشاؤه بواسطة فريق Sindre Sorhus. يضيف وظائف مريحة: محاولات إعادة، مهلات زمنية، تحليل تلقائي لـ JSON، وإدارة سهلة للأخطاء.

الميزات:

حجمه حوالي 2 كيلوبايت فقط (بعد الضغط gzip)
محاولات إعادة تلقائية عند أخطاء الشبكة
دعم AbortController
دعم كامل لـ TypeScript

مثال كود:

import ky from 'ky';

interface Product {  id: number;  title: string;  price: number;}

async function getProduct(id: number): Promise<Product> {  const product = await ky    .get(`https://fakestoreapi.com/products/${id}`)    .json<Product>();  return product;}

getProduct(1).then(product => console.log(product.title));

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