TypeScript में HTTP क्लाइंट: सही तरीके से अनुरोध करना

TypeScript में HTTP क्लाइंट: सही तरीके से अनुरोध करना

आधुनिक वेब डेवलपमेंट में HTTP-अनुरोधों के साथ काम करना प्रमुख कार्यों में से एक है। TypeScript, JavaScript पर एक सख्ती से टाइप की गई परत के रूप में, डेवलपर्स को विश्वसनीय और पूर्वानुमानित HTTP-क्लाइंट बनाने के लिए शक्तिशाली उपकरण प्रदान करता है। इस लेख में, हम समझेंगे कि TypeScript में HTTP-क्लाइंट को सही तरीके से कैसे व्यवस्थित किया जाए, ताकि आपका कोड सुरक्षित, पढ़ने योग्य और आसानी से बनाए रखने योग्य हो।

HTTP-क्लाइंट के लिए TypeScript क्यों आदर्श है?

TypeScript स्थैतिक टाइपिंग जोड़ता है, जो बाहरी API के साथ काम करते समय विशेष रूप से महत्वपूर्ण है। आपको ठीक-ठीक पता होता है कि सर्वर से कौन सा डेटा आएगा, और आप संकलन चरण में ही कई त्रुटियों को रोक सकते हैं। आइए एक बुनियादी उदाहरण देखें:

// बुरा: बिना प्रकार के JavaScriptconst data = await fetch('/api/users');const users = await data.json();// हम users की संरचना नहीं जानते

// अच्छा: प्रकारों के साथ TypeScriptinterface User {  id: number;  name: string;  email: string;}

const response = await fetch('/api/users');const users: User[] = await response.json();// अब users की स्पष्ट संरचना है

TypeScript में बुनियादी HTTP-क्लाइंट बनाना

चलिए एक सार्वभौमिक HTTP-क्लाइंट बनाकर शुरू करते हैं जो सभी प्रकार के अनुरोधों को संभालेगा। हम नेटिव fetch API का उपयोग करेंगे, जो आधुनिक ब्राउज़रों और 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.