टाइपस्क्रिप्ट में Fetch/XMLHttpRequest

यह लेख टाइपस्क्रिप्ट में Fetch/XMLHttpRequest को समझाता है।

आप Fetch API और XMLHttpRequest का उपयोग करने के तरीके के साथ-साथ उनके बीच के अंतर को भी सीख सकते हैं।

YouTube Video

टाइपस्क्रिप्ट में Fetch/XMLHttpRequest

टाइपस्क्रिप्ट में, HTTP अनुरोध मुख्य रूप से दो API का उपयोग करके किए जाते हैं: Fetch API और XMLHttpRequest। टाइपस्क्रिप्ट का उपयोग करके, आप इन API के साथ असिंक्रोनस संचार करते समय अनुरोधों और प्रतिक्रियाओं के लिए टाइप चेकिंग जोड़ सकते हैं, जिससे आप अधिक सुरक्षित कोड लिख सकते हैं। नीचे, हम प्रत्येक का उपयोग कैसे करें, इसे समझाएंगे।

Fetch API

Fetch API एक प्रॉमिस-आधारित API है जिसे असिंक्रोनस संचार (HTTP अनुरोध) को सरलता से करने के लिए उपयोग किया जाता है। टाइपस्क्रिप्ट में, आप fetch विधि का उपयोग करके अनुरोध कर सकते हैं और प्रतिक्रियाओं को टाइप-सुरक्षित तरीके से संसाधित कर सकते हैं।

मूल उपयोग

नीचे GET अनुरोध का एक बुनियादी उदाहरण दिया गया है।

 1const url = 'https://jsonplaceholder.typicode.com/posts';
 2
 3fetch(url)
 4    .then(response => {
 5        if (!response.ok) {
 6        throw new Error('Network response was not ok');
 7        }
 8        return response.json();  // Parse the response as JSON
 9    })
10    .then(data => {
11        console.log(data);
12    })
13    .catch(error => {
14        console.error('Fetch error:', error);
15    });

• यह कोड निर्दिष्ट URL पर एक GET अनुरोध भेजता है, प्राप्त प्रतिक्रिया को JSON के रूप में पार्स करता है, और इसे कंसोल पर आउटपुट करता है।

टाइपस्क्रिप्ट में टाइप-सुरक्षित डेटा का प्रबंधन

fetch विधि से प्रतिक्रिया का प्रकार अस्पष्ट होता है, इसलिए आप प्रतिक्रिया प्रकार को स्पष्ट रूप से परिभाषित करके टाइपस्क्रिप्ट की टाइप चेकिंग का लाभ उठा सकते हैं।

 1// Define the type for the response data
 2interface Post {
 3    userId: number;
 4    id: number;
 5    title: string;
 6    body: string;
 7}
 8
 9const url = 'https://jsonplaceholder.typicode.com/posts';
10
11fetch(url)
12    .then(response => response.json())
13    .then((data: Post[]) => {
14        data.forEach(post => {
15            console.log(`Title: ${post.title}`);
16        });
17    })
18    .catch(error => {
19        console.error('Error fetching data:', error);
20    });

• यह कोड fetch के माध्यम से प्राप्त डेटा पर Post प्रकार लागू करता है, प्रतिक्रिया को टाइप-सुरक्षित तरीके से संसाधित करता है, और प्रत्येक पोस्ट का शीर्षक कंसोल पर आउटपुट करता है।

POST अनुरोध का उदाहरण

सर्वर को डेटा भेजते समय, POST विधि का उपयोग करें। बॉडी में JSON भेजने के लिए, headers और body निर्दिष्ट करें।

 1const postData = {
 2    title: 'foo',
 3    body: 'bar',
 4    userId: 1
 5};
 6
 7fetch('https://jsonplaceholder.typicode.com/posts', {
 8        method: 'POST',
 9        headers: {
10            'Content-Type': 'application/json'
11        },
12        body: JSON.stringify(postData)
13    })
14    .then(response => response.json())
15    .then(data => {
16        console.log('Created post:', data);
17    })
18    .catch(error => {
19        console.error('Error posting data:', error);
20    });

• यह कोड एक POST अनुरोध के साथ सर्वर पर JSON प्रारूप में डेटा भेजता है, प्रतिक्रिया को JSON के रूप में प्राप्त करता है, और इसे कंसोल पर आउटपुट करता है।

असिंक्रोनस फ़ंक्शंस (async/await) का उपयोग करके Fetch

टाइपस्क्रिप्ट में async/await का उपयोग करके, आप असिंक्रोनस प्रोसेसिंग को अधिक सरलता से लिख सकते हैं।

 1// Define the type for the response data
 2interface Post {
 3    userId: number;
 4    id: number;
 5    title: string;
 6    body: string;
 7}
 8
 9async function fetchPosts() {
10    try {
11        const response = await fetch('https://jsonplaceholder.typicode.com/posts');
12        if (!response.ok) {
13            throw new Error('Network response was not ok');
14        }
15        const data: Post[] = await response.json();
16        console.log(data);
17    } catch (error) {
18        console.error('Fetch error:', error);
19    }
20}
21
22fetchPosts();

• यह कोड async/await सिंटैक्स का उपयोग करके पोस्ट डेटा को विषम रूप से प्राप्त करता है, प्रतिक्रिया को Post[] प्रकार के रूप में संसाधित करता है, और इसे कंसोल पर आउटपुट करता है।

XMLHttpRequest

XMLHttpRequest एक पुराना API है और Fetch API की तुलना में कुछ अधिक जटिल है, लेकिन इसे तब उपयोग किया जा सकता है जब ब्राउज़र संगतता या अधिक उन्नत नियंत्रण की आवश्यकता हो।

XMLHttpRequest का बुनियादी उपयोग

नीचे GET अनुरोध का एक उदाहरण दिया गया है।

 1const xhr = new XMLHttpRequest();
 2xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts', true);
 3
 4xhr.onreadystatechange = function () {
 5    if (xhr.readyState === 4 && xhr.status === 200) {
 6        const data = JSON.parse(xhr.responseText);
 7        console.log(data);
 8    }
 9};
10
11xhr.send();

• यह कोड XMLHttpRequest का उपयोग करके निर्दिष्ट URL पर एक GET अनुरोध भेजता है, प्रतिक्रिया को JSON के रूप में पार्स करता है, और इसे कंसोल पर आउटपुट करता है।

POST अनुरोध का उदाहरण

सर्वर को डेटा भेजते समय, open विधि में POST निर्दिष्ट करें और send के साथ डेटा भेजें।

 1const xhr = new XMLHttpRequest();
 2xhr.open('POST', 'https://jsonplaceholder.typicode.com/posts', true);
 3xhr.setRequestHeader('Content-Type', 'application/json');
 4
 5const postData = JSON.stringify({
 6    title: 'foo',
 7    body: 'bar',
 8    userId: 1
 9});
10
11xhr.onreadystatechange = function () {
12    if (xhr.readyState === 4 && xhr.status === 201) {
13        console.log('Created post:', xhr.responseText);
14    }
15};
16
17xhr.send(postData);

• यह कोड XMLHttpRequest का उपयोग करके एक POST अनुरोध के साथ सर्वर पर JSON प्रारूप में डेटा भेजता है, और निर्मित डेटा वाली प्रतिक्रिया को कंसोल पर आउटपुट करता है।

XMLHttpRequest द्वारा त्रुटि हैंडलिंग

आप onerror इवेंट का उपयोग करके अनुरोध त्रुटियों को संभाल सकते हैं।

 1const xhr = new XMLHttpRequest();
 2xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts', true);
 3
 4xhr.onerror = function () {
 5    console.error('Request failed');
 6};
 7
 8xhr.onload = function () {
 9    if (xhr.status === 200) {
10        console.log('Response:', xhr.responseText);
11    } else {
12        console.error('Error:', xhr.status);
13    }
14};
15
16xhr.send();

• यह कोड XMLHttpRequest के साथ एक GET अनुरोध निष्पादित करता है, onerror के माध्यम से अनुरोध त्रुटियों को संभालता है, और सफलता तथा विफलता दोनों स्थितियों में प्रतिक्रिया को उपयुक्त रूप से लॉग करता है।

Fetch API और XMLHttpRequest की तुलना

सारांश

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

आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।

YouTube Video