TypeScript पर HTTP क्लाइंट: उन्नत अनुरोध तकनीकें

TypeScript पर उन्नत HTTP क्लाइंट: बुनियादी अनुरोधों से औद्योगिक समाधानों तक

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

1. जेनेरिक्स (Generics) का उपयोग करके टाइप किया गया HTTP क्लाइंट बनाना

TypeScript का एक मुख्य लाभ सख्त टाइपिंग है। आइए एक बुनियादी HttpClient क्लास बनाएं जो जेनेरिक्स के माध्यम से प्रतिक्रिया प्रकार को स्वीकार करेगा। इससे कंपाइलेशन चरण में त्रुटियों से बचा जा सकेगा।

// types.ts\nexport interface ApiResponse<T> {\n  data: T;\n  status: number;\n  ok: boolean;\n}\n\nexport interface RequestConfig {\n  headers?: Record<string, string>;\n  params?: Record<string, string>;\n  signal?: AbortSignal;\n}\n\n// http-client.ts\nimport { ApiResponse, RequestConfig } from './types';\n\nclass HttpClient {\n  private baseUrl: string;\n\n  constructor(baseUrl: string) {\n    this.baseUrl = baseUrl;\n  }\n\n  async get<T>(endpoint: string, config?: RequestConfig): Promise<ApiResponse<T>> {\n    const url = new URL(`${this.baseUrl}${endpoint}`);\n    if (config?.params) {\n      Object.entries(config.params).forEach(([key, value]) => {\n        url.searchParams.append(key, value);\n      });\n    }\n\n    const response = await fetch(url.toString(), {\n      method: 'GET',\n      headers: {\n        'Content-Type': 'application/json',\n        ...config?.headers,\n      },\n      signal: config?.signal,\n    });\n\n    const data: T = await response.json();\n    return {\n      data,\n      status: response.status,\n      ok: response.ok,\n    };\n  }\n\n  async post<T, U>(endpoint: string, body: U, config?: RequestConfig): Promise<ApiResponse<T>> {\n    const response = await fetch(`${this.baseUrl}${endpoint}`, {\n      method: 'POST',\n      headers: {\n        'Content-Type': 'application/json',\n        ...config?.headers,\n      },\n      body: JSON.stringify(body),\n      signal: config?.signal,\n    });\n\n    const data: T = await response.json();\n    return { data, status: response.status, ok: response.ok };\n  }\n}\n\nexport default HttpClient;

2. त्रुटि प्रबंधन और टाइमआउट

एक उन्नत क्लाइंट को नेटवर्क त्रुटियों और व्यावसायिक तर्क त्रुटियों दोनों को सही ढंग से संभालना चाहिए। आइए AbortController का उपयोग करके टाइमआउट तंत्र और कस्टम त्रुटि प्रबंधन जोड़ें।

// errors.ts\nexport class HttpError extends Error {\n  status: number;\n  data?: unknown;\n\n  constructor(message: string, status: number, data?: unknown) {\n    super(message);\n    this.name = 'HttpError';\n    this.status = status;\n    this.data = data;\n  }\n}\n\nexport class TimeoutError extends Error {\n  constructor(timeout: number) {\n    super(`Request timed out after ${timeout}ms`);\n    this.name = 'TimeoutError';\n  }\n}\n\n// http-client.ts (विस्तार)\nasync requestWithTimeout<T>(\n  endpoint: string,\n  options: RequestInit,\n  timeout: number = 5000\n): Promise<ApiResponse<T>> {\n  const controller = new AbortController();\n  const timeoutId = setTimeout(() => controller.abort(), timeout);\n\n  try {\n    const response = await fetch(`${this.baseUrl}${endpoint}`, {\n      ...options,\n      signal: controller.signal,\n    });\n\n    if (!response.ok) {\n      const errorData = await response.json().catch(() => null);\n      throw new HttpError(\n        `HTTP ${response.status}: ${response.statusText}`,\n        response.status,\n        errorData\n      );\n    }\n\n    const data: T = await response.json();\n    r