عميل HTTP بلغة TypeScript: إجراء الطلبات بشكل صحيح

عميل HTTP بلغة TypeScript: إجراء الطلبات بشكل صحيح

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

لماذا TypeScript مثالي لعملاء HTTP؟

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

// سيء: JavaScript بدون أنواعconst data = await fetch('/api/users');const users = await data.json();// لا نعرف هيكل users

// جيد: TypeScript مع أنواعinterface User {  id: number;  name: string;  email: string;}

const response = await fetch('/api/users');const users: User[] = await response.json();// الآن users له هيكل واضح

إنشاء عميل HTTP أساسي بلغة TypeScript

لنبدأ بإنشاء عميل HTTP عام سيعالج جميع أنواع الطلبات. سنستخدم واجهة برمجة التطبيقات الأصلية fetch، المتوفرة في المتصفحات الحديثة و Node.js 18+.

التنفيذ الأساسي مع الكتابة

interface HttpClientConfig {  baseURL: string;  headers?: Record<string, string>;  timeout?: number;}

interface ApiResponse<T> {  data: T;  status: number;  ok: boolean;}

class HttpClient {  private baseURL: string;  private headers: Record<string, string>;  private timeout: number;

  constructor(config: HttpClientConfig) {    this.baseURL = config.baseURL;    this.headers = {      'Content-Type': 'application/json',      ...config.headers,    };    this.timeout = config.timeout || 10000;  }

  private async request<T>(    endpoint: string,    options: RequestInit = {}  ): Promise<ApiResponse<T>> {    const url = `${this.baseURL}${endpoint}`;    const controller = new AbortController();    const timeoutId = setTimeout(() => controller.abort(), this.timeout);

    try {      const response = await fetch(url, {        ...options,        headers: { ...this.headers, ...options.headers },        signal: controller.signal,      });

      clearTimeout(timeoutId);

      const data: T = await response.json();

      return {        data,        status: response.status,        ok: response.ok,      };    } catch (error) {      clearTimeout(timeoutId);      throw this.handleError(error);    }  }

  private handleError(error: unknown): Error {    if (error instanceof DOMException && error.name === 'AbortError') {      return new Error('Request timeout');    }    if (error instanceof TypeError) {      return new Error('Network error');    }    return error as Error;  }

  async get<T>(endpoint: string): Promise<ApiResponse<T>> {    return this.request<T>(endpoint, { method: 'GET' });  }

  async post<T>(endpoint: string, body: unknown): Promise<ApiResponse<T>> {    return this.request<T>(endpoint, {      method: 'POST',      body: JSON.stringify(body),    });  }

  async put<T>(endpoint: string, body: unknown): Promise<ApiResponse<T>> {    return this.request<T>(endpoint, {      method: 'PUT',      body: JSON.stringify(body),    });  }

  async delete<T>(endpoint: string): Promise<ApiResponse<T>> {    return this.request<T>(endpoint, { method: 'DELETE' });  }}

استخدام العميل

// إنشاء نسخة من العميلconst api = new HttpClient({  baseURL: 'https://api.