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

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

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

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

JavaScript HTTP अनुरोध करने के कई तरीके प्रदान करता है: अंतर्निहित fetch, axios और node-fetch लाइब्रेरीज़। हालाँकि, TypeScript स्थैतिक टाइपिंग के कारण उनके साथ काम को एक नए स्तर पर ले जाता है। आप अनुरोध और प्रतिक्रिया की संरचना का पहले से वर्णन कर सकते हैं, जो संकलन चरण में कई त्रुटियों को समाप्त करता है। कल्पना करें कि आप एक API के साथ काम कर रहे हैं जो उपयोगकर्ताओं की सूची लौटाता है। प्रकारों के बिना, आप किसी गैर-मौजूद फ़ील्ड तक पहुँचने का जोखिम उठाते हैं, और त्रुटि केवल रनटाइम में दिखाई देगी। TypeScript इस समस्या का समाधान करता है।

मुख्य भाग: शुरू से HTTP क्लाइंट बनाना

1. fetch और टाइपिंग के साथ बुनियादी GET अनुरोध

सबसे सरल से शुरू करते हैं — GET अनुरोध। TypeScript में, हम प्रतिक्रिया के लिए एक इंटरफ़ेस परिभाषित कर सकते हैं और इसे fetch के जेनेरिक फ़ंक्शन में पास कर सकते हैं। यहाँ एक उदाहरण है:

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

async function getUser(id: number): Promise<User> {  const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);    if (!response.ok) {    throw new Error(`HTTP error! status: ${response.status}`);  }    const data: User = await response.json();  return data;}

// उपयोगgetUser(1)  .then(user => console.log(user.name))  .catch(error => console.error('त्रुटि:', error.message));

यहाँ हम स्पष्ट रूप से निर्दिष्ट करते हैं कि फ़ंक्शन Promise<User> लौटाता है। यदि API बदलता है, तो TypeScript कंपाइलर आपको प्रकारों में बेमेल के बारे में चेतावनी देगा। response.ok की जाँच पर ध्यान दें — HTTP त्रुटियों (404, 500, आदि) को संभालने के लिए यह एक अनिवार्य कदम है।

2. बॉडी और हेडर के साथ POST अनुरोध

सर्वर पर डेटा भेजने के लिए हेडर सेट करने और अनुरोध बॉडी को सीरियलाइज़ करने की आवश्यकता होती है। एक नया उपयोगकर्ता बनाने के लिए एक फ़ंक्शन बनाते हैं:

interface CreateUserRequest {  name: string;  email: string;}

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

async function createUser(userData: CreateUserRequest): Promise<CreateUserResponse> {  const response = await fetch('https://jsonplaceholder.typicode.com/users', {    method: 'POST',    headers: {      'Content-Type': 'application/json',    },    body: JSON.stringify(userData),  });

  if (!response.ok) {    const errorBody = await response.text();    throw new Error(`निर्माण त्रुटि: ${response.status} - ${errorBody}`);  }

  return await response.json();}

// कॉल का उदाहरणconst newUser: CreateUserRequest = { name: 'इवान', email: 'ivan@example.com' };createUser(newUser).then(result => console.log('बनाया गया ID:', result.id));

CreateUserRequest और CreateUserResponse की टाइपिंग कोड को स्व-दस्तावेजीकरण बनाती है। अन्य डेवलपर्स तुरंत देख सकते हैं कि भेजने के लिए कौन से फ़ील्ड अनिवार्य हैं और प्रतिक्रिया में क्या उम्मीद करनी है।

3. त्रुटि प्रबंधन के साथ सार्वभौमिक HTTP क्लाइंट

वास्तविक परियोजनाओं में, शायद ही कभी एक ही फ़ंक्शन से काम चलता है। एक सार्वभौमिक वर्ग या फ़ंक्शन का सेट बनाना बेहतर है जो अनुरोध तर्क को केंद्रीकृत करता है। यहाँ एक उन्नत क्लाइंट का उदाहरण है:

type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE';

interface RequestConfig {  method: HttpMethod;  endpoint: string;  body?: unknown;  params?: Record<string, string>;}

class HttpClient {  private baseUrl: string;\