डेवलपर्स को अक्सर अपने स्वयं के API या थर्ड-पार्टी API से डेटा प्राप्त करना पड़ता है। यह लेख ब्राउज़र के Fetch API का उपयोग करके किसी एंडपॉइंट से कुछ डेटा GET करने के बारे में बात करता है।
Fetch API क्या है?
Fetch API एक इंटरफ़ेस है जो हमें Chrome या Firefox जैसे वेब ब्राउज़र से सर्वर पर HTTP अनुरोध करने की अनुमति देता है। एक GET अनुरोध सर्वर पर एक एंडपॉइंट को हिट करता है फिर उस एंडपॉइंट से डेटा के साथ एक प्रतिक्रिया लौटाता है ताकि आप इसे पढ़ सकें।
अनुरोधों के प्रकार
GET HTTP अनुरोध केवल एक प्रकार का अनुरोध है जिसे आप सर्वर पर कर सकते हैं। अन्य प्रकार के अनुरोध POST, PUT, और DELETE हैं। ये अनुरोध एक CRUD एप्लिकेशन बनाते हैं। यह वह जगह है जहां हम अपने डेटाबेस में Create (POST), Read (GET), Update (PUT), और Destroy (DELETE) डेटा कर सकते हैं।
इसके अलावा, हम थर्ड-पार्टी APIs पर एंडपॉइंट्स को हिट कर सकते हैं। API के आधार पर, आपको केवल कुछ अनुरोध करने की अनुमति होगी, मुख्य रूप से उनके डेटा को अपरिवर्तनीय रखने के लिए, इसलिए आप उन अनुरोधों को नहीं कर पाएंगे जो डेटा में हेरफेर करते हैं, आप केवल इसे पढ़ पाएंगे।
Fetch API कैसे काम करता है?
Fetch API संचार की एक Promise-आधारित प्रणाली का उपयोग करता है। याद दिला दें, Promises असिंक्रोनस फंक्शन्स हैं जो अपने कोड ब्लॉक में लॉजिक को कैप्सुलेट करते हैं और एक प्रतिक्रिया लौटाते हैं जो निर्धारित करता है कि promise resolved था या rejected।
Fetch API के उपयोगकर्ताओं के रूप में, हमें वास्तव में promise लॉजिक लिखने की आवश्यकता नहीं है। हमें बस इसका उपयोग अनुरोध भेजने के लिए करना है और Fetch API हुड के तहत एक promise लौटाता है। यहां बुनियादी सिंटैक्स है ताकि हम प्रतिक्रिया प्राप्त कर सकें:
promise.then(response).then(json).catch(error);
promise वास्तविक असिंक्रोनस अनुरोध है। fetch() मेथड ग्लोबल स्कोप में उपलब्ध है और इसे उस एंडपॉइंट को पास किया जाता है जिस पर हम HTTP अनुरोध करना चाहते हैं।
let promise = fetch("https://swapi.dev/api/films/1");
अनुरोध के बाद, हम या तो then और catch के साथ promise सिंटैक्स का उपयोग कर सकते हैं या सर्वर की प्रतिक्रिया प्राप्त करने के लिए async/await फंक्शन का उपयोग कर सकते हैं।
Promise सिंटैक्स
promise.then(response => { if (response.status !== 200) { console.log('Looks like there was a problem. Status Code: ' + response.status); return; } response.json().then(data => { console.log(data); }).catch(error => { console.log(error.message); }) })
यहां हम promise लेते हैं फिर प्रतिक्रिया की प्रतीक्षा करते हैं। जब हमें प्रतिक्रिया मिलती है, यदि स्टेटस कोड 200 के अलावा कुछ भी है, तो हम अपने कंसोल पर एक त्रुटि कोड लॉग करते हैं और फंक्शन को समाप्त करते हैं।
अन्यथा, प्रतिक्रिया को पठनीय बनाने ताकि हमारा फ्रंटएंड वेबसाइट इसका उपयोग कर सके, हम इसे json() मेथड के साथ JavaScript ऑब्जेक्ट नोटेशन (JSON) ऑब्जेक्ट में बदलते हैं। हम चाहते हैं कि यह पिछले promise पर एक promise चेन करके पहले मूल्यांकन करे।
एक बार इसका मूल्यांकन हो जाने पर हम फिर कंसोल पर देख सकते हैं कि क्या पास किया गया था। यदि आप साथ चल रहे हैं, तो आपको ऐसा कुछ मिलना चाहिए:
{ title: 'A New Hope', episode_id: 4, opening_crawl: 'It is a period of civil war.\r\n' + 'Rebel spaceships, striking\r\n' + 'from a hidden base, have won\r\n' + 'their first victory against\r\n' + 'the evil Galactic Empire.\r\n' + '\r\n' + 'During the battle, Rebel\r\n' + 'spies managed to steal secret\r\n' + "plans to the Empire's\r\n" + 'ultimate weapon, the DEATH\r\n' + 'STAR, an armored space\r\n' + 'station with enough power\r\n' + 'to destroy an entire planet.\r\n' + '\r\n' + "Pursued by the Empire's\r\n" + 'sinister agents, Princess\r\n' + 'Leia races home aboard her\r\n' + 'starship, custodian of the\r\n' + 'stolen plans that can save her\r\n' + 'people and restore\r\n' + 'freedom to the galaxy....', director: 'George Lucas', producer: 'Gary Kurtz, Rick McCallum', release_date: '1977-05-25', characters: [ 'https://swapi.dev/api/people/1/', 'https://swapi.dev/api/people/2/', 'https://swapi.dev/api/people/3/', 'https://swapi.dev/api/people/4/', 'https://swapi.dev/api/people/5/', 'https://swapi.dev/api/people/6/', 'https://swapi.dev/api/people/7/', 'https://swapi.dev/api/people/8/', 'https://swapi.dev/api/people/9/', 'https://swapi.dev/api/people/10/', 'https://swapi.dev/api/people/12/', 'https://swapi.dev/api/people/13/', 'https://swapi.dev/api/people/14/', 'https://swapi.dev/api/people/15/', 'https://swapi.dev/api/people/16/', 'https://swapi.dev/api/people/18/', 'https://swapi.dev/api/people/19/', 'https://swapi.dev/api/people/81/' ], planets: [ 'https://swapi.dev/api/planets/1/', 'https://swapi.dev/api/planets/2/', 'https://swapi.dev/api/planets/3/' ], starships: [ 'https://swapi.dev/api/starships/2/', 'https://swapi.dev/api/starships/3/', 'https://swapi.dev/api/starships/5/', 'https://swapi.dev/api/starships/9/', 'https://swapi.dev/api/starships/10/', 'https://swapi.dev/api/starships/11/', 'https://swapi.dev/api/starships/12/', 'https://swapi.dev/api/starships/13/' ], vehicles: [ 'https://swapi.dev/api/vehicles/4/', 'https://swapi.dev/api/vehicles/6/', 'https://swapi.dev/api/vehicles/7/', 'https://swapi.dev/api/vehicles/8/' ], species: [ 'https://swapi.dev/api/species/1/', 'https://swapi.dev/api/species/2/', 'https://swapi.dev/api/species/3/', 'https://swapi.dev/api/species/4/', 'https://swapi.dev/api/species/5/' ], created: '2014-12-10T14:23:31.880000Z', edited: '2014-12-20T19:49:45.256000Z', url: 'https://swapi.dev/api/films/1/' }
यदि हमें फ्रंटएंड पर यह जानकारी मिलती है, तो हम इसका उपयोग कार्ड या टेबल या हम जिस तरह से प्रदर्शित करना चाहें, उसे भरने के लिए कर सकते हैं।
Async/Await
हम समान परिणाम लॉग करने के लिए async/await फंक्शन का भी उपयोग कर सकते हैं।
let getRequest = async () => { try { let fetched = await fetch("https://swapi.dev/api/films/1"); if(fetched) { let read = await fetched.json() console.log(read); return read; } } catch (error) { throw new Error(error.message); } } getRequest()
async कीवर्ड हमें बताता है कि उस फंक्शन का कुछ हिस्सा असिंक्रोनस होगा। जब हम await कीवर्ड पर आते हैं, तो स्क्रिप्ट का निष्पादन तब तक रुकता है जब तक कोड की वह लाइन मूल्यांकन नहीं हो जाती।
इस फंक्शन में हमारे दो await स्टेटमेंट्स हैं, जो promise लॉजिक में हमारे दो then() स्टेटमेंट्स के बराबर हैं। एक स्टेटमेंट उस URL पर फेच होने की प्रतीक्षा करता है जिसे हमने पास किया है, और दूसरा तब तक प्रतीक्षा करता है जब तक फेच की गई जानकारी JSON में पार्स नहीं हो जाती। हम किसी भी त्रुटि को पकड़ने के लिए try/catch का उपयोग करते हैं जो हमें प्रतिक्रियाओं से असामान्य कुछ वापस मिलने पर मिल सकती है।
अंतिम नोट्स
नोड वातावरण में Fetch API के काम करने के लिए (यानी यदि आप Visual Studio Code जैसे IDE का उपयोग कर रहे हैं), आपको yarn add या npm install node-fetch करना होगा, क्योंकि fetch केवल ब्राउज़र वातावरण में काम करता है।
