TypeScript पर HTTP क्लाइंट: सही अनुरोध और प्रतिक्रिया प्रसंस्करण

परिचय: क्यों एक सही HTTP क्लाइंट आधुनिक वेब एप्लिकेशन की नींव है

कोई भी आधुनिक वेब एप्लिकेशन HTTP के माध्यम से सर्वर के साथ इंटरैक्ट करता है। चाहे वह उत्पादों की सूची लोड करना हो, रजिस्ट्रेशन फॉर्म सबमिट करना हो, या डैशबोर्ड के लिए डेटा प्राप्त करना हो - यह सब HTTP अनुरोध भेजने तक सीमित हो जाता है। TypeScript में, अपनी शक्तिशाली टाइप सिस्टम के साथ, आप सिर्फ एक काम करने वाला ही नहीं, बल्कि वास्तव में विश्वसनीय और पूर्वानुमानित HTTP क्लाइंट बना सकते हैं।

इस लेख में, हम समझेंगे कि TypeScript पर HTTP क्लाइंट कैसे बनाया जाए जो एरर को हैंडल करेगा, रिस्पॉन्स को सही ढंग से टाइप करेगा, हेडर को मैनेज करेगा और मिडलवेयर को सपोर्ट करेगा। आप जानेंगे कि बिना रैपर के कच्चे fetch का उपयोग करना एक बुरी प्रैक्टिस क्यों है, और इसे एक शक्तिशाली टूल में कैसे बदला जाए।

मूल बातें: कच्चे fetch से टाइप किए गए क्लाइंट तक

चलिए एक बुनियादी उदाहरण से शुरू करते हैं। JavaScript में बिल्ट-इन fetch एक अच्छा शुरुआती बिंदु है, लेकिन यह सुविधाजनक टाइपिंग और एरर हैंडलिंग प्रदान नहीं करता है। TypeScript पर हम इसे अपने स्वयं के फंक्शन में लपेट सकते हैं।

fetch के लिए एक सरल रैपर

चलिए एक बेसिक HttpClient क्लास बनाते हैं जो बेस URL और सेटिंग्स को स्वीकार करेगा।

interface RequestOptions {
  headers?: Record<string, string>;
  params?: Record<string, string>;
}

class HttpClient {
  private baseUrl: string;
  private defaultHeaders: Record<string, string>;

  constructor(baseUrl: string, defaultHeaders: Record<string, string> = {}) {
    this.baseUrl = baseUrl;
    this.defaultHeaders = defaultHeaders;
  }

  private buildUrl(path: string, params?: Record<string, string>): string {
    const url = new URL(`${this.baseUrl}${path}`);
    if (params) {
      Object.entries(params).forEach(([key, value]) => url.searchParams.append(key, value));
    }
    return url.toString();
  }

  async get<T>(path: string, options?: RequestOptions): Promise<T> {
    const url = this.buildUrl(path, options?.params);
    const response = await fetch(url, {
      method: 'GET',
      headers: { ...this.defaultHeaders, ...options?.headers },
    });

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    return response.json() as Promise<T>;
  }
}

अब client.get<User>('/users/1') कॉल एक टाइप किया गया User ऑब्जेक्ट लौटाएगा। यह any के साथ काम करने से कहीं बेहतर है।

उन्नत एरर हैंडलिंग और रिस्पॉन्स टाइपिंग

सिर्फ एरर फेंक देना सबसे अच्छा तरीका नहीं है। हमें नेटवर्क एरर, सर्वर एरर (4xx, 5xx) और JSON पार्सिंग एरर के बीच अंतर करने की आवश्यकता है। आइए अपनी खुद की एरर क्लासेस बनाएं।

एरर क्लासेस बनाना

class HttpError extends Error {
  status: number;
  body: any;

  constructor(message: string, status: number, body?: any) {
    super(message);
    this.name = 'HttpError';
    this.status = status;
    this.body = body;
  }
}

class NetworkError extends Error {
  constructor(message: string) {
    super(message);
    this.name = 'NetworkError';
  }
}

class ParseError extends Error {
  constructor(message: string) {
    super(message);
    this.name = 'ParseError';
  }
}

get मेथड में बेहतर हैंडलिंग

async get<T>(path: string, options?: RequestOptions): Promise<T> {
  try {
    const url = this.buildUrl(path, options?.params);
    const response = await fetch(url, {
      method: 'GET',
      headers: { ...this.defaultHeaders, ...options?.headers },
    });

    let body: any;
    try {
      body = await response.json();
    } catch {
      throw new ParseError('Failed to parse response as JSON');
    }

    if (!response.ok) {
      throw new HttpError(
        `Request failed with status ${response.status}`,
        response.status,
        body
      );
    }

    return body as T;
  } catch (er
```