जावास्क्रिप्ट में एक प्रो की तरह डेटा कैसे प्राप्त करें

fetch एपीआई हमें एक HTTP अनुरोध बनाने की अनुमति देता है ताकि हम जावास्क्रिप्ट में कई चीजों को पूरा कर सकें - जैसे एपीआई से डेटा पुनर्प्राप्त करना, सर्वर पर डेटा पोस्ट करना, या यहां तक कि वेब पेज की पूरी सामग्री प्राप्त करना। यह HTTP अनुरोध प्रदान किए गए URL से डेटा को अतुल्यकालिक रूप से पुनर्प्राप्त करेगा, और किसी प्रकार की HTTP प्रतिक्रिया उत्पन्न करेगा। आइए देखें कि यह कैसे काम करता है।

fetch() फ़ंक्शन एक वैश्विक फ़ंक्शन है, और इसका उपयोग अक्सर एपीआई के साथ बातचीत करने के लिए किया जाता है। यदि आप इसके लिए नए हैं, तो आप अकेले नहीं हैं - तो आइए एक नज़र डालते हैं कि fetch() कैसे काम करता है।

जावास्क्रिप्ट में लाने का उपयोग करना

लाने का सबसे बुनियादी उपयोग एक तर्क लेता है - वह URL जिसे हम लाना चाहते हैं। चूंकि fetch HTTP अनुरोध उत्पन्न करता है, इसलिए हमें हमेशा एक URL प्रदान करना होगा:

 let fetchExample = fetch("https://fjolt.com").then((res) => { // Do something with res });

चूंकि फ़ेच का परिणाम अतुल्यकालिक है, हम प्रतिक्रिया को पकड़ने के लिए then() का उपयोग कर सकते हैं, और इसके साथ कुछ कर सकते हैं। लौटाए गए res या प्रतिक्रिया के बारे में अच्छी बात यह है कि इसमें अंतर्निहित विधियों का एक समूह है, जो हमें fetch होने वाली सामग्री को तुरंत पार्स करने देता है:

• res.text() - URL की टेक्स्ट सामग्री लौटाता है। यदि यह एक वेबसाइट है, तो यह HTML लौटाती है।
• res.json() - स्वरूपित JSON डेटा लौटाता है, यदि यह मौजूद है।
• res.blob() - ब्लॉब डेटा लौटाता है, यदि कोई मौजूद है।
• res.arrayBuffer() - यदि कोई मौजूद है तो arrayBuffer डेटा लौटाता है।
• res.formData() - फॉर्मडाटा डेटा लौटाता है, यदि कोई मौजूद है।

चूंकि अलग-अलग यूआरएल विभिन्न प्रकार की सामग्री उत्पन्न करते हैं, इसलिए उपरोक्त विधियां हमें उस सामग्री को किसी भी तरह से पार्स करने की अनुमति देती हैं। यह समझने के लिए कि यह सब कैसे काम करता है, आइए दो बहुत ही सामान्य उदाहरणों को देखें।

उदाहरण 1: Javascript फ़ेच का उपयोग करके किसी वेबसाइट की HTML सामग्री प्राप्त करें

जैसा कि ऊपर उल्लेख किया गया है, res.text() हमें एक URL की टेक्स्ट सामग्री देता है - इसलिए हम इसका उपयोग किसी URL की संपूर्ण HTML सामग्री प्राप्त करने के लिए कर सकते हैं। एक बार जब हम res.text() का उपयोग करके अपनी प्रतिक्रिया पकड़ लेते हैं, then हम प्रतिक्रिया को दूसरे के साथ पकड़ सकते हैं, जिससे हमें प्रदान किए गए URL की सामग्री को डाउनलोड करने और वापस करने की अनुमति मिलती है:

 let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => { return data; }); // Now contains our website's HTML.

यदि लिंक मौजूद नहीं है, या कोई त्रुटि होती है, तो हमारी response वस्तु में एक त्रुटि होगी। उदाहरण के लिए, एक पृष्ठ नहीं मिला 404 लौटाएगा, या एक खराब गेटवे त्रुटि 502 ।

उदाहरण 2: जावास्क्रिप्ट के माध्यम से JSON प्राप्त करें Fetch

यदि किसी URL की सामग्री में JSON है, तो हम res.json() का उपयोग कर सकते हैं। निम्न कोड, उदाहरण के लिए, URL से एक JSON ऑब्जेक्ट लौटाएगा, यह मानते हुए कि URL मान्य JSON वापस भेज रहा है:

 let apiResponse = fetch("https://fjolt.com/api").then(res => res.json()).then((data) => { return data; }); // Now contains a JSON object - assuming one exists

जावास्क्रिप्ट फ़ेच के लिए विकल्प

फ़ेच में उपलब्ध विकल्पों को समझना भी महत्वपूर्ण है। वे यूआरएल के बाद एक वस्तु के रूप में आते हैं - यानी fetch(URL, { options }) । यदि आपने पहले HTTP अनुरोधों के साथ काम किया है, तो कुछ परिचित हो सकते हैं। नीचे प्रदर्शित fetch फ़ंक्शन में आपके द्वारा उपयोग किए जा सकने वाले सभी संभावित विकल्प शामिल हैं:

 fetch("https://fjolt.com/", { body: JSON.stringify({ someData: "value" }) method: 'POST' mode: 'cors' cache: 'no-cache' credentials: 'same-origin' headers: { 'Content-Type': 'application/json' }, redirect: 'follow' referrerPolicy: 'no-referrer' });

और यहाँ एक सारांश दिया गया है कि इनमें से प्रत्येक का क्या अर्थ है:

• body में पाठ का मुख्य भाग होता है। इस उदाहरण में, हम कुछ JSON भेज रहे हैं, जिन्हें कड़े करने की आवश्यकता है।
• method एक मानक HTTP विधि है। यह POST / GET / DELETE / PUT / CONNECT / PATCH / TRACE / OPTIONS हो सकता है।
• mode संदर्भित करता है कि क्रॉस मूल अनुरोध स्वीकार किए जाते हैं या नहीं। यह cors / no-cors / same-origin हो सकता है।
• cache यह दर्शाता है कि ब्राउज़र कैश के साथ कैसे इंटरैक्ट करेगा। यह default / no-cache / reload / force-cache / only-if-cached ।
• credentials का मतलब है कि क्रॉस ओरिजिनल कुकीज को अनुरोध के साथ भेजा जाना चाहिए या नहीं। इसे include किया जा सकता है / same-origin / omit ।
• headers में अनुरोध से जुड़ा कोई हेडर होता है। इसमें कोई भी HTTP शीर्षलेख हो सकता है - उदाहरण के लिए, यहां यह Content-Type दिखाता है - लेकिन आपके पास कस्टम HTTP शीर्षलेख भी हो सकते हैं।
• redirect यह निर्धारित करता है कि यदि प्राप्त किया गया URL रीडायरेक्ट करता है तो क्या होगा। यह follow / error / manual हो सकता है।
• referrerPolicy यह निर्धारित करती है कि अनुरोध के साथ कितनी रेफरर जानकारी पास की गई है। यह no-referrer / no-referrer-when-downgrade / ओरिजिनल / ओरिजिनल-व्हेन origin-when-cross-origin origin सेम same-origin / strict-origin / strict-origin-when-cross-origin / unsafe-url हो सकता है।

याद रखें, जावास्क्रिप्ट फ़ेच अतुल्यकालिक है

जब हम फ़ेच का उपयोग करते हैं, तो यह URL पर जाता है, जानकारी एकत्र करता है, और हमें वापस response प्रदान करता है। यह तत्काल नहीं है, क्योंकि यूआरएल लोड करने, इसे डाउनलोड करने और इसे वापस लाने में समय लगता है। यदि हम केवल फ़ेच अकेले चलाते हैं, तो उसके तुरंत बाद एक कंसोल लॉग केवल एक Promise लौटाएगा, न कि उस URL से response जो हम चाहते हैं:

 let apiResponse = fetch("https://fjolt.com/api"); console.log(apiResponse); // Returns Promise<Pending>

ऐसा इसलिए होता है क्योंकि fetch() फ़ंक्शन चलता है, लेकिन जावास्क्रिप्ट response की प्रतीक्षा नहीं करता है। जैसे, अगर हम response तक पहुंचना चाहते हैं, तो हमें इसके लिए प्रतीक्षा करने के लिए जावास्क्रिप्ट को स्पष्ट रूप से बताना होगा।

fetch() के लिए प्रतीक्षा करने के दो तरीके हैं:

• हम then का उपयोग कर सकते हैं, और then() () के भीतर हमारे fetch() की प्रतिक्रिया में हेरफेर कर सकते हैं।
• हम await का उपयोग कर सकते हैं, और इसकी सामग्री का उपयोग करने से पहले फ़ेच के वापस आने की प्रतीक्षा कर सकते हैं।

जावास्क्रिप्ट में लाने के लिए प्रतीक्षा करने के लिए तब का उपयोग करना

then का उपयोग अक्सर प्राप्त करने से प्रतिक्रियाओं को पकड़ने और संसाधित करने के लिए किया जाता है। fetch() की सामग्री को then() कॉलबैक फ़ंक्शन के भीतर हेरफेर किया जा सकता है, लेकिन इसके बाहर नहीं। उदाहरण के लिए:

 let apiResponse = fetch("https://fjolt.com/api").then(res => res.json()).then((data) => { console.log(data); // We can do anything with the data from our api here. return data; }); console.log(apiResponse); // This will return Promise<Pending> // That means we can't use the apiResponse variable // outside of the then() function.

यदि हम उस के बाहर fetch() की सामग्री का उपयोग करना चाहते हैं, then हमें await का उपयोग करना होगा।

जावास्क्रिप्ट में एक लाने के लिए प्रतीक्षा करने के लिए प्रतीक्षा का उपयोग करना

फ़ेच के लिए प्रतीक्षा करने का दूसरा तरीका await कीवर्ड का उपयोग करना है। अधिकांश आधुनिक ब्राउज़र शीर्ष स्तर की प्रतीक्षा का समर्थन करते हैं, लेकिन यदि आप समर्थन के बारे में चिंतित हैं, या 14.8 से पहले Node.JS के संस्करण का उपयोग कर रहे हैं, तो आप किसी भी await कोड को async function के भीतर लपेटना चाहेंगे।

यदि हम प्रतीक्षा का उपयोग करते हैं, तो हम अपने फ़ंक्शन या कोड में कहीं भी हमारे एपीआई से प्रतिक्रिया का उपयोग कर सकते हैं, और किसी भी response फ़ंक्शन का उपयोग कर सकते हैं, जैसे text() या json() । उदाहरण के लिए:

 // Typically we wrap await in an async function // But most modern browsers and Node.JS support // await statements outside of async functions now. async getAPI() { let apiResponse = await fetch("https://fjolt.com/api"); let response = apiResponse.json(); // Since we waited for our API to respond using await // The response variable will return the response from the API // And not a promise. console.log(response); } getAPI();

यदि आप एसिंक्स ऑपरेशंस के बारे में अधिक जानना चाहते हैं, तो एसिंक्रोनस जावास्क्रिप्ट पर हमारा ट्यूटोरियल यहां पढ़ें ।

निष्कर्ष

इस गाइड में, हमने यह देखा है कि फ़ेच कैसे काम करता है। हमने विभिन्न विकल्प दिखाए हैं जिन्हें आप अपने fetch() अनुरोधों के साथ भेज सकते हैं, और जावास्क्रिप्ट में एसिंक्रोनस अवधारणाओं का उपयोग करके प्रतिक्रिया की प्रतीक्षा कैसे करें। fetch() जावास्क्रिप्ट में एक अविश्वसनीय रूप से शक्तिशाली उपकरण है, और हर समय बड़े उत्पादों में अक्सर उपयोग किया जाता है। मुझे आशा है कि आपको यह लेख अच्छा लगा होगा।