Handling JSON responses and error handling In Hindi
जावास्क्रिप्ट प्रोग्रामिंग में fetch() फंक्शन मेथड को अप्लाई करके एपीआई के साथ काम करते जावास्क्रिप्ट प्रोग्रामर को कई वेब रिस्पांस में JSON डेटा इनफार्मेशन को मैनेज और कण्ट्रोल करना पड़ता है। इसके अलावा, एक बेहतर वेब इंटरनेट यूजर एक्सपेरिएंस और पॉब्लेम्स को इफेक्टिव आर्डर में डीबग कर प्रॉपर फॉर्मेट में एरर मैनेजमेंट बहुत इम्पॉटेंट है। तो अब यहाँ हम जावास्क्रिप्ट JSON रेस्पाँसिस को मैनेज और स्ट्रांग एरर मैनेजमेंट को अप्लाई करने के कई तरीको को बेहतर जानेंगे।
Handling JSON responses in JavaScript.
जब वेबपेज में कोई एपीआई JSON फॉर्मेट रिस्पांस में डेटा को रिटर्न करता है, तो प्रोग्रामर रिस्पांस ऑब्जेक्ट पर .json() फंक्शन मेथड को अप्लाई करके रिस्पांस बॉडी को जावास्क्रिप्ट वेबपेज ऑब्जेक्ट में पार्स कर देते हैं।
Example of controlling JSON response in JavaScript.
fetch(‘https://jsonplaceholder.typicode.com/users’)
.then(response => {
// here it Check if the response is successful or not check status 200-299
if (!response.ok) {
throw new Error(‘system response is not ok’);
}
return response.json(); // here it Parse the response as JSON object
})
.then(data => {
console.log(‘let Fetched data’, data); // here it Handle the parsed JSON data object
})
.catch(error => {
console.error(‘here is a problem with the fetch json data operation’, error); // this use to Handle any json errors
});
Explanation of Handling JSON responses.
यहाँ response.json() मेथड एक प्रॉमिस वैल्यू को रिटर्न करता है, जो की JSON ऑब्जेक्ट में सॉल्व हो जाता है। यदि यहाँ रिस्पांस एक वैलिड JSON ऑब्जेक्ट है, तो इसे सिस्टम ऑटोमेटिकली पार्स कर देता है, और अगले .then() ब्लॉक में अवेलेबल हो जाएगा।
यहाँ response.ok: response.ok प्रॉपर्टी यह चेक करता है कि HTTP स्टेटस कोड 200-299 की रेंज में है या नहीं, जो की json सक्सेस रिस्पांस को इंडीकेट करता है।
Error handling in fetch() method in JavaScript.
जावास्क्रिप्ट वेबपेज में fetch() मेथड केवल तभी प्रॉमिस को रिजेक्ट करता है, जब नेटवर्क फेलियर हो या कोई सिस्टम प्रॉब्लम हो, जो वेब रिक्वेस्ट को कम्पलीट होने से स्टॉप करती हो जैसे, इंटरनेट अवेलेबल नहीं है। यह मेथड 404 या 500 जैसे HTTP एरर स्टेटस कोड पर रिजेक्ट नहीं करता है। जहा ऐसी सिस्टम नेटवर्क एरर को डील करने के लिए प्रोग्रामर को सिस्टम रेस्पॉन्सेस कंडीशन स्टेटस को मैन्युअल रूप से चेक करना होगा।
Basic error handling example in JavaScript.
fetch(‘https://jsonplaceholder.typicode.com/users’)
.then(response => {
// here it Check if the json response was successful check status 200-299 range
if (!response.ok) {
// here If the json response is not successful, then it throw an system error
throw new Error(`Display system HTTP error, ${response.status}`);
}
return response.json(); // here it Parse JSON if operation is successful
})
.then(data => {
console.log(‘Json system Data’, data); // here it Handle the json data
})
.catch(error => {
console.error(‘Display system Error’, error); // here it Catch and log any system errors
});
Explanation of basic error handling.
यहाँ इस json response.ok में एक बूलियन रिस्पांस है, जो यूजर इंडीकेट करता है कि सिस्टम रिस्पांस की स्टेटस 200-299 की रेंज में है या नहीं है। यदि रेंज में नहीं है, तो प्रोग्रामर throw new Error() मेथड फंक्शन के साथ मैन्युअल रूप से एक एरर मैसेज को थ्रो कर सकते हैं।
यहाँ .catch(error) फंक्शन मेथड फ़ेच के प्रोसेस के दौरान या json रेस्पॉन्सेस प्रोसेस करते समय होने वाली किसी भी सिस्टम एरर को कैच करता है, जिसमें सिस्टम नेटवर्क में होने वाली प्रोब्लेम्स इनवैलिड JSON पार्सिंग या रेस्पॉन्सेस स्टेटस को टेस्ट करके जनरेट कस्टम एरर को डिस्प्ले करता हैं।
Managing 404, 500, or other HTTP errors in JavaScript.
जावास्क्रिप्ट वेबपेज में मल्टीप्ल रिस्पांस रिक्वेस्ट एरर में 404 (नॉट फाउंड) या 500 (इंटरनल सर्वर एरर) जैसे मल्टीप्ल सिस्टम HTTP रिक्वेस्ट स्टेटस कोड को मैनेज करने के लिए प्रोग्रामर response.status स्टेटस रिस्पांस कोड को टेस्ट कर सकते हैं, और स्टेटस कोड के अनुसार वर्क कर सकते हैं। यदि यहाँ नेटवर्क सिस्टम रिस्पांस सक्सेस नहीं होती है मतलब, स्टेटस कोड 200-299 रेंज में नहीं है, तो प्रोग्रामर एक एरर मैसेज थ्रो कर सकते हैं, या उसे प्रॉपर आर्डर में मैनेज कर सकते हैं।
Example of 404 and 500 error handling in JavaScript.
fetch(‘https://jsonplaceholder.typicode.com/users’)
.then(response => {
if (response.status === 404) {
throw new Error(‘web Page not found 404 code error’);
} else if (response.status === 500) {
throw new Error(‘display internal Server error 500 status code’);
} else if (!response.ok) {
throw new Error(‘system Network response is not ok’);
}
return response.json();
})
.then(data => {
console.log(‘it Fetched system data’, data); // here it use to Handle successful system response status code
})
.catch(error => {
console.error(‘There was an system error’, error); // here it use to Catch specific or generic system response status code errors
});
Managing 404, 500, or other HTTP errors explained.
इस स्टेटस रिस्पांस कोड में सर्वर 404 या 500 के साथ रिस्पांस प्रोवाइड करता है, इन कोड स्टेटस के स्पेसिफिक एरर मैसेज को डिस्प्ले करता हैं।
यहाँ यदि सिस्टम रिस्पांस कुछ और है, जैसे, 403, 400, तो प्रोग्रामर response.ok मेथड को यूज़ करके एक जनरल एरर मैसेज को डिस्प्ले करता हैं।
Managing errors with async/await in JavaScript.
जावास्क्रिप्ट प्रोग्रामर अधिक डिटेल्ड प्रोग्राम सिंटैक्स और इजी एरर मैनेजमेंट के लिए async/await मेथड को भी यूज़ कर सकते हैं। जहा यह .then() और .catch() फंक्शन की तरह कार्य करता है, याद रहे, इसे अधिक सिंक्रोनस स्टाइल में उपयोग करता है, जिससे प्रोग्राम कोड अधिक इजी और रीडेबल हो जाता है।
Example of getting data and error management with async/await in JavaScript.
try {
const response = await fetch(‘https://jsonplaceholder.typicode.com/users’);
// here it Check if the system status code response was successful or not
if (!response.ok) {
throw new Error(`display HTTP system error Status ${response.status}`);
}
const data = await response.json(); // here it Parse the response as JSON
console.log(‘it Fetched system data’, data); // here it Handle the fetched data
} catch (error) {
console.error(‘display system Error’, error); // here it Catch and handle all errors network, JSON, etc in process
}
}
fetchUserData(); // here it Call the async function to fetch system or json data
Explanation of data and error management with async/await.
यहाँ await फंक्शन fetch() और .json() मेथड से प्रॉमिस के कम्पलीट होने के वेट करने के लिए यूज़ किया जाता है।
जहा try…catch ब्लॉक वेबपेज में सिस्टम एरर कोड स्टेटस को मैनेज करने के लिए यूज़ किया जाता है। यहाँ try ब्लॉक के अंदर होने वाली कोई भी सिस्टम एरर नेटवर्क प्रॉब्लम, रिस्पांस एरर, आदि कैच ब्लॉक में कैच किया जाता है।
Managing invalid JSON or other non-JSON responses in JavaScript.
कई बार सर्वर सिस्टम रिस्पांस में एक ऐसी रिस्पांस को रिटर्न कर सकता है, जो JSON फॉर्मेट में नहीं होती, भले ही यूजर ऐसा होने की वेट करते हों। इसे मैनेज करने के लिए, प्रोग्रामर JSON को पार्स करने का ट्राय करने से पहले Content-Type हेडर को टेस्ट कर सकते हैं।
Example of non-JSON responses in JavaScript.
fetch(‘https://jsonplaceholder.typicode.com/users’)
.then(response => {
if (!response.ok) {
throw new Error(‘system Network response is not ok’);
}
// here it Check if the response is JSON ok
const contentType = response.headers.get(‘Content-Type’);
if (contentType && contentType.includes(‘application/json’)) {
return response.json(); // here it Parse JSON if content type is application/json format
} else {
throw new Error(‘display Expected JSON application response’);
}
})
.then(data => {
console.log(‘now it Fetched network system data’, data); // here it use to Handle JSON data object
})
.catch(error => {
console.error(‘it display system Error’, error); // here it Handle any system network errors
});
invalid JSON or other non-JSON responses Explanation.
यहाँ हम response.headers.get(‘Content-Type’) मेथड को यूज़ करके रिस्पांस के Content-Type हेडर को टेस्ट कर सकते हैं।
यदि सिस्टम रिस्पांस JSON application/json फॉर्मेट में नहीं है, तो यहाँ एक एरर जनरेट होती है।
यह इन मैटर को मैनेज करने में हेल्प करता है, जहाँ सर्वर एक अप्रत्याशित फॉर्मेट में जैसे, सिंपल टेक्स्ट वैल्यू, HTML फॉर्मेट में रिटर्न कर सकता है।
Managing timeout errors in JavaScript.
किसी पर्टिकुलर मैटर में सिस्टम नेटवर्क रिक्वेस्ट रिस्पांस में बहुत ज्यादा टाइम लग सकता है, और प्रोग्रामर अपने fetch() फंक्शन रिक्वेस्ट के लिए एक टाइमआउट फंक्शन को अप्लाई करना चाह सकते हैं। हालाँकि, यहाँ fetch() फंक्शन स्वयं डायरेक्ट टाइमआउट ऑप्शन को सपोर्ट नहीं करता है, यहाँ प्रोग्रामर टाइमआउट को मैन्युअल रूप से मैनेज करने के लिए setTimeout मेथड को यूज़ कर सकते हैं।
Example of adding timeout to Fetch in JavaScript.
function fetchWithTimeout(url, timeout = 3000) {
const timeoutPromise = new Promise((_, reject) =>
setTimeout(() => reject(new Error(‘system Request timed is out’)), timeout)
);
const fetchPromise = fetch(url);
return Promise.race([fetchPromise, timeoutPromise]);
}
fetchWithTimeout(‘https://jsonplaceholder.typicode.com/users’)
.then(response => {
if (!response.ok) {
throw new Error(‘system Network response is not ok’);
}
return response.json();
})
.then(data => console.log(‘it Fetched system data’, data))
.catch(error => console.error(‘display system Error:’, error));
Explanation of managing timeout errors.
यहाँ इस प्रोग्राम में fetchWithTimeout दो प्रॉमिसेस को क्रिएट करता है.
जहा यह एक फ़ेच रिक्वेस्ट है।
वही सेकंड एक टाइमआउट प्रॉमिस है, जो एक पर्टिकुलर टाइम फ्रेम के बाद रिजेक्ट कर दिया जाता है।
यहाँ Promise.race([fetchPromise, timeoutPromise]) उस प्रॉमिस के रिजल्ट को रिटर्न करता है, जो पहले से सॉल्व हो जाता है। यदि फ़ेच प्रोसेस में बहुत अधिक समय लग रहा है, तो टाइमआउट मेथड प्रॉमिस को रिजेक्ट कर देगा, अंत में कैच ब्लॉक मेथड प्रोग्राम एरर को मैनेज कर देगा।
Summary of handling JSON responses and errors in JavaScript.
- Handle JSON responses – जावास्क्रिप्ट वेबपेज में रिस्पांस बॉडी को JSON के रूप में पार्स करने के लिए response.json() मेथड को यूज़ करें।
- Error handling – सिस्टम रिस्पांस सक्सेस को टेस्ट करने के लिए response.ok मेथड को यूज़ करें और इनवैलिड HTTP स्टेटस कोड के लिए मैन्युअल रूप से एरर को लोग करें।
- Error catching – सिस्टम रेस्पॉन्सेस प्रॉमिस रिजेक्शन के लिए .catch() मेथड को यूज़ करें या अधिक डिटेल्ड सिंटैक्स के लिए async/await प्रोसेस के साथ try…catch ब्लॉक को यूज़ करें।
- Non-JSON responses – वेबपेज में JSON को पार्स करने को ट्राय करने से पहले Content-Type हेडर को टेस्ट करें।
- Timeout management – सिस्टम में लॉन्ग टाइम से रन हो रहे वेबपेज रिक्वेस्ट को कैंसिल करने के लिए Promise.race के साथ कस्टम टाइमआउट मेथड को अप्लाई करे।
