TypeScript के लिए HTTP-क्लाइंट: API के साथ काम करने के लिए शीर्ष लाइब्रेरी

TypeScript के लिए HTTP-क्लाइंट: शीर्ष लाइब्रेरी का संपूर्ण अवलोकन

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

1. Axios — सार्वभौमिक मानक

Axios TypeScript इकोसिस्टम में सबसे लोकप्रिय HTTP-क्लाइंट बना हुआ है। यह प्रॉमिस-आधारित सुविधाजनक API, स्वचालित JSON रूपांतरण और इंटरसेप्टर के लिए अंतर्निहित समर्थन प्रदान करता है।

मुख्य विशेषताएं:

• ब्राउज़र और Node.js का समर्थन (बॉक्स से बाहर)
• JSON प्रतिक्रियाओं का स्वचालित पार्सिंग
• CancelToken या AbortController के माध्यम से अनुरोध रद्द करना
• XSRF से सुरक्षा
• TypeScript के लिए पूर्ण टाइपिंग

TypeScript के साथ उपयोग का उदाहरण:

import axios, { AxiosResponse } from 'axios';

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

async function fetchUser(id: number): Promise<User> {  const response: AxiosResponse<User> = await axios.get<User>(    `https://jsonplaceholder.typicode.com/users/${id}`  );  return response.data;}

// उपयोगfetchUser(1).then(user => console.log(user.name));

Axios बड़े प्रोजेक्ट्स के लिए आदर्श है जहाँ अनुरोधों की बारीक ट्यूनिंग और त्रुटि प्रबंधन की आवश्यकता होती है।

2. Fetch API — देशी दृष्टिकोण

आधुनिक Fetch API सभी ब्राउज़रों और Node.js (संस्करण 18 से) में अंतर्निहित है। यह हल्का है, अतिरिक्त पैकेज स्थापित करने की आवश्यकता नहीं है, लेकिन मैन्युअल त्रुटि प्रबंधन और पार्सिंग की आवश्यकता होती है।

लाभ:

• कोई निर्भरता नहीं
• स्ट्रीम और Service Workers का समर्थन
• generics के माध्यम से TypeScript के साथ देशी एकीकरण

TypeScript के साथ उदाहरण:

interface Post {  userId: number;  id: number;  title: string;  body: string;}

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

getPost(1).then(post => console.log(post.title));

छोटे प्रोजेक्ट्स या जब बंडल आकार को कम करने की आवश्यकता हो, तब इसकी अनुशंसा की जाती है।

3. Ky — न्यूनतमता और सुविधा

Ky Fetch API के ऊपर एक हल्का रैपर है, जिसे Sindre Sorhus टीम ने बनाया है। यह सुविधाजनक फ़ंक्शन जोड़ता है: पुनः प्रयास, टाइमआउट, स्वचालित JSON पार्सिंग और सुविधाजनक त्रुटि प्रबंधन।

विशेषताएं:

• आकार केवल ~2 KB (gzip)
• नेटवर्क त्रुटियों पर स्वचालित पुनः प्रयास
• AbortController का समर्थन
• TypeScript का पूर्ण समर्थन

कोड उदाहरण:

import ky from 'ky';

interface Product {  id: number;  title: string;  price: number;}

async function getProduct(id: number): Promise<Product> {  const product = await ky    .get(`https://fakestoreapi.com/products/${id}`)    .json<Product>();  return product;}

getProduct(1).then(product => console.log(product.title));

Ky आधुनिक वेब एप्लिकेशन के लिए उपयुक्त है जहाँ प्रदर्शन और सरलता महत्वपूर्ण है।

4. Got — Node.js के लिए शक्तिशाली क्लाइंट

Got Node.js के लिए सबसे अधिक कार्यात्मक HTTP-क्लाइंट में से एक है। यह कैशिंग, स्ट्रीम, प्रॉक्सी, पुनः प्रयास और उन्नत त्रुटि प्रबंधन का समर्थन करता है। पूर्ण