एपीआई हमें एक HTTP अनुरोध बनाने की अनुमति देता है ताकि हम में कई चीजों को पूरा कर सकें - जैसे एपीआई से डेटा पुनर्प्राप्त करना, सर्वर पर डेटा पोस्ट करना, या यहां तक कि वेब पेज की पूरी सामग्री प्राप्त करना। यह HTTP अनुरोध प्रदान किए गए URL से डेटा को अतुल्यकालिक रूप से पुनर्प्राप्त करेगा, और किसी प्रकार की HTTP प्रतिक्रिया उत्पन्न करेगा। आइए देखें कि यह कैसे काम करता है। fetch जावास्क्रिप्ट फ़ंक्शन एक वैश्विक फ़ंक्शन है, और इसका उपयोग अक्सर एपीआई के साथ बातचीत करने के लिए किया जाता है। यदि आप इसके लिए नए हैं, तो आप अकेले नहीं हैं - तो आइए एक नज़र डालते हैं कि कैसे काम करता है। fetch() fetch() जावास्क्रिप्ट में लाने का उपयोग करना लाने का सबसे बुनियादी उपयोग एक तर्क लेता है - वह URL जिसे हम लाना चाहते हैं। चूंकि HTTP अनुरोध उत्पन्न करता है, इसलिए हमें हमेशा एक URL प्रदान करना होगा: fetch let fetchExample = fetch("https://fjolt.com").then((res) => { // Do something with res }); चूंकि फ़ेच का परिणाम अतुल्यकालिक है, हम प्रतिक्रिया को पकड़ने के लिए का उपयोग कर सकते हैं, और इसके साथ कुछ कर सकते हैं। लौटाए गए या प्रतिक्रिया के बारे में अच्छी बात यह है कि इसमें अंतर्निहित विधियों का एक समूह है, जो हमें होने वाली सामग्री को तुरंत पार्स करने देता है: then() res fetch - URL की टेक्स्ट सामग्री लौटाता है। यदि यह एक वेबसाइट है, तो यह HTML लौटाती है। res.text() - स्वरूपित JSON डेटा लौटाता है, यदि यह मौजूद है। res.json() - ब्लॉब डेटा लौटाता है, यदि कोई मौजूद है। res.blob() - यदि कोई मौजूद है तो arrayBuffer डेटा लौटाता है। res.arrayBuffer() - फॉर्मडाटा डेटा लौटाता है, यदि कोई मौजूद है। res.formData() चूंकि अलग-अलग यूआरएल विभिन्न प्रकार की सामग्री उत्पन्न करते हैं, इसलिए उपरोक्त विधियां हमें उस सामग्री को किसी भी तरह से पार्स करने की अनुमति देती हैं। यह समझने के लिए कि यह सब कैसे काम करता है, आइए दो बहुत ही सामान्य उदाहरणों को देखें। उदाहरण 1: Javascript फ़ेच का उपयोग करके किसी वेबसाइट की HTML सामग्री प्राप्त करें जैसा कि ऊपर उल्लेख किया गया है, हमें एक URL की टेक्स्ट सामग्री देता है - इसलिए हम इसका उपयोग किसी URL की संपूर्ण HTML सामग्री प्राप्त करने के लिए कर सकते हैं। एक बार जब हम का उपयोग करके अपनी प्रतिक्रिया पकड़ लेते हैं, हम प्रतिक्रिया को दूसरे के साथ पकड़ सकते हैं, जिससे हमें प्रदान किए गए URL की सामग्री को डाउनलोड करने और वापस करने की अनुमति मिलती है: res.text() res.text() then 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 है, तो हम का उपयोग कर सकते हैं। निम्न कोड, उदाहरण के लिए, URL से एक JSON ऑब्जेक्ट लौटाएगा, यह मानते हुए कि URL मान्य JSON वापस भेज रहा है: res.json() let apiResponse = fetch("https://fjolt.com/api").then(res => res.json()).then((data) => { return data; }); // Now contains a JSON object - assuming one exists जावास्क्रिप्ट फ़ेच के लिए विकल्प फ़ेच में उपलब्ध विकल्पों को समझना भी महत्वपूर्ण है। वे यूआरएल के बाद एक वस्तु के रूप में आते हैं - यानी । यदि आपने पहले HTTP अनुरोधों के साथ काम किया है, तो कुछ परिचित हो सकते हैं। नीचे प्रदर्शित फ़ंक्शन में आपके द्वारा उपयोग किए जा सकने वाले सभी संभावित विकल्प शामिल हैं: fetch(URL, { options }) 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' }); और यहाँ एक सारांश दिया गया है कि इनमें से प्रत्येक का क्या अर्थ है: में पाठ का मुख्य भाग होता है। इस उदाहरण में, हम कुछ JSON भेज रहे हैं, जिन्हें कड़े करने की आवश्यकता है। body एक मानक HTTP विधि है। यह / / / / / / / हो सकता है। method 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 में अनुरोध से जुड़ा कोई हेडर होता है। इसमें कोई भी HTTP शीर्षलेख हो सकता है - उदाहरण के लिए, यहां यह दिखाता है - लेकिन आपके पास कस्टम HTTP शीर्षलेख भी हो सकते हैं। headers Content-Type यह निर्धारित करता है कि यदि प्राप्त किया गया URL रीडायरेक्ट करता है तो क्या होगा। यह / / हो सकता है। redirect 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 पर जाता है, जानकारी एकत्र करता है, और हमें वापस प्रदान करता है। यह तत्काल नहीं है, क्योंकि यूआरएल लोड करने, इसे डाउनलोड करने और इसे वापस लाने में समय लगता है। यदि हम केवल फ़ेच अकेले चलाते हैं, तो उसके तुरंत बाद एक कंसोल लॉग केवल एक लौटाएगा, न कि उस URL से जो हम चाहते हैं: response Promise 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 जावास्क्रिप्ट में एक लाने के लिए प्रतीक्षा करने के लिए प्रतीक्षा का उपयोग करना फ़ेच के लिए प्रतीक्षा करने का दूसरा तरीका कीवर्ड का उपयोग करना है। अधिकांश आधुनिक ब्राउज़र का समर्थन करते हैं, लेकिन यदि आप समर्थन के बारे में चिंतित हैं, या 14.8 से पहले Node.JS के संस्करण का उपयोग कर रहे हैं, तो आप किसी भी कोड को के भीतर लपेटना चाहेंगे। await शीर्ष स्तर की प्रतीक्षा 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()
