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

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

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

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

لا يزال Axios أشهر عميل HTTP بفضل واجهة برمجة التطبيقات الغنية والدعم المدمج لـ TypeScript. توفر المكتبة طرقًا ملائمة لطلبات GET، POST، PUT، DELETE، وتحويل JSON تلقائيًا، وإلغاء الطلبات.

import axios from 'axios';

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

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

// مثال مع إرسال البياناتconst newUser: Partial<User> = { name: 'إيفان', email: 'ivan@example.com' };axios.post('/api/users', newUser).then(({ data }) => console.log(data));

المزايا:

• تكامل عميق مع TypeScript (أدوية للاستجابات)
• معترضات لتسجيل ومعالجة الأخطاء
• حماية مدمجة من XSS وتسلسل تلقائي
• دعم تقدم تحميل الملفات

2. Ky — خفيف وحديث

Ky هي مكتبة بسيطة (حوالي ~5KB)، مبنية فوق Fetch API. مثالية للمشاريع التي تهم فيها سرعة التحميل والبساطة. مكتوبة بالكامل مع TypeScript.

import ky from 'ky';

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

const posts = await ky.get('https://jsonplaceholder.typicode.com/posts').json<Post[]>();

// إرسال مع رؤوس مخصصةconst response = await ky.post('https://api.example.com/data', {  json: { key: 'value' },  headers: { 'X-API-Key': 'secret' },});

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

• معالجة تلقائية لأخطاء HTTP (الحالات 4xx/5xx)
• دعم مدمج لإعادة المحاولة (محاولات متكررة عند الفشل)
• تخصيص سهل عبر تمديد الفئة
• يعمل في المتصفح و Node.js (عبر محولات)

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

Got هو عميل HTTP كامل الميزات للجانب الخادم باستخدام TypeScript. يدعم التدفقات، التخزين المؤقت، البروكسي، وسيناريوهات المصادقة المعقدة.

import got from 'got';

interface ApiResponse {  success: boolean;  data: Record<string, unknown>;}

const result = await got.get('https://api.example.com/resource', {  responseType: 'json',  headers: {    authorization: `Bearer ${process.env.TOKEN}`  }}).json<ApiResponse>();

// تحميل ملف مع التقدمgot.stream('https://example.com/file.zip')  .on('downloadProgress', ({ percent }) => {    console.log(`تم تحميل ${(percent * 100).toFixed(0)}%`);  })  .pipe(fs.createWriteStream('./file.zip'));

متى تختار Got:

• لتطبيقات الخادم ذات الأحمال العالية
• عند الحاجة للعمل مع تدفقات البيانات
• لسيناريوهات التخزين المؤقت وإعادة المحاولة المعقدة
• التكامل مع TypeScript عبر الديكورات

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

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

interface Config {  baseURL: string;  token?: string;}

async function fetchData<T>(endpoint: string, config: Config): Promise<T> {  const response = await fetch(`${config.baseURL}${endpoint}`, {    headers: {      'Content-Type': 'application/json',      ...(config.token && { Authorization: `Bearer ${config.token}` })