जावास्क्रिप्ट अनुरोध प्राप्त करें:फ़ेच एपीआई का उपयोग करना

डेवलपर्स को अक्सर अपने स्वयं के API या तृतीय-पक्ष API से डेटा पुनर्प्राप्त करना पड़ता है। यह लेख समापन बिंदु से कुछ डेटा प्राप्त करने के लिए आपके ब्राउज़र के Fetch API का उपयोग करने के बारे में बात करता है।

फ़ेच API क्या है?

फ़ेच एपीआई एक इंटरफ़ेस है जो हमें क्रोम या फ़ायरफ़ॉक्स जैसे वेब ब्राउज़र से सर्वर से HTTP अनुरोध करने की अनुमति देता है। एक जीईटी अनुरोध सर्वर पर एक एंडपॉइंट हिट करता है, फिर उस एंडपॉइंट से डेटा के साथ प्रतिक्रिया देता है ताकि आप इसे पढ़ सकें।

अनुरोधों के प्रकार

HTTP अनुरोध प्राप्त करें केवल एक प्रकार का अनुरोध है जिसे आप सर्वर से कर सकते हैं। अन्य प्रकार के अनुरोध POST, PUT और DELETE हैं। ये अनुरोध CRUD एप्लिकेशन बनाते हैं। यह वह जगह है जहां हम अपने डेटाबेस में डेटा बना सकते हैं (POST), पढ़ें (GET), अपडेट (PUT), और नष्ट (हटाएं) कर सकते हैं।

इसके अलावा, हम थर्ड पार्टी एपीआई पर एंडपॉइंट हिट कर सकते हैं। एपीआई के आधार पर, आपको केवल कुछ अनुरोध करने की अनुमति होगी, मुख्य रूप से उनके डेटा को अपरिवर्तनीय रखने के लिए, इसलिए आप उन अनुरोधों को करने में सक्षम नहीं होंगे जो डेटा में हेरफेर करते हैं, आप केवल इसे पढ़ने में सक्षम होंगे।

Fetch API कैसे काम करता है?

Fetch API एक वादा-आधारित संचार प्रणाली का उपयोग करता है। एक अनुस्मारक के रूप में, वादे अतुल्यकालिक कार्य हैं जो तर्क को कोड के अपने ब्लॉक में समाहित करते हैं और एक प्रतिक्रिया देता है जो निर्धारित करता है कि वादा हल किया गया था या अस्वीकार कर दिया गया था।

फ़ेच एपीआई के उपयोगकर्ताओं के रूप में, हमें वास्तव में वादा तर्क लिखने की आवश्यकता नहीं है। हमें केवल एक अनुरोध भेजने के लिए इसका उपयोग करना है और फ़ेच एपीआई हुड के तहत एक वादा लौटाता है। यहां मूल वाक्यविन्यास है ताकि हम प्रतिक्रिया प्राप्त कर सकें:

promise.then(response).then(json).catch(error);

वादा वास्तविक अतुल्यकालिक अनुरोध है। fetch() विधि वैश्विक दायरे में उपलब्ध है और उस समापन बिंदु को पारित कर दिया गया है जिसे हम HTTP अनुरोध करना चाहते हैं।

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।

बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।

वादा करें =प्राप्त करें ("https://swapi.dev/api/films/1");

अनुरोध के बाद, हम तब के साथ प्रॉमिस सिंटैक्स का उपयोग कर सकते हैं और सर्वर की प्रतिक्रिया प्राप्त करने के लिए async/wait फ़ंक्शन को पकड़ या उपयोग कर सकते हैं।

वादा सिंटैक्स

promise.then(response => {if (response.status !==200) { कंसोल.लॉग ('ऐसा लगता है कि कोई समस्या थी। स्थिति कोड:' + response.status); वापसी; } response.json ()। तब (डेटा => {कंसोल। लॉग (डेटा);})। पकड़ें (त्रुटि => {कंसोल। लॉग (त्रुटि। संदेश);})})

यहां हम वादा करते हैं और फिर प्रतिक्रिया की प्रतीक्षा करते हैं। जब हमें कोई प्रतिक्रिया मिलती है, यदि स्थिति कोड 200 के अलावा कुछ भी है, तो हम अपने कंसोल पर एक त्रुटि कोड लॉग करते हैं और फ़ंक्शन को समाप्त कर देते हैं।

अन्यथा, प्रतिक्रिया को पढ़ने योग्य बनाने के लिए ताकि हमारी फ्रंटएंड वेबसाइट इसका उपयोग कर सके, हम इसे json() के साथ JavaScript ऑब्जेक्ट नोटेशन (JSON) ऑब्जेक्ट में बदल देते हैं। तरीका। हम चाहते हैं कि आगे बढ़ने से पहले इसका मूल्यांकन किया जाए, इसलिए हम पिछले वादे के वादे पर जंजीर में हैं।

एक बार इसका मूल्यांकन हो जाने के बाद हम इसे अपने कंसोल पर देखने के लिए लॉग इन कर सकते हैं। यदि आप साथ चल रहे हैं, तो आपको ऐसा कुछ मिलना चाहिए:

{ शीर्षक:'ए न्यू होप', एपिसोड_आईडी:4, ओपनिंग_क्रॉल:'यह गृहयुद्ध का दौर है।\r\n' + 'रिबेल स्पेसशिप, स्ट्राइकिंग\r\n' + 'एक छिपे हुए बेस से, जीत गए हैं\r\n' + 'अपनी पहली जीत के खिलाफ\r\n' + 'दुष्ट गेलेक्टिक साम्राज्य।\r\n' + '\r\n' + 'लड़ाई के दौरान, विद्रोही\r\n' + 'जासूस गुप्त चोरी करने में कामयाब रहे\r\n' + "साम्राज्य की योजना\r\n" + 'अंतिम हथियार, मौत\r\n' + 'स्टार, एक बख्तरबंद अंतरिक्ष\r\n' + 'स्टेशन के साथ पर्याप्त शक्ति\r\n' + 'एक पूरे ग्रह को नष्ट करने के लिए। 'लीया अपने घर पर दौड़ती है\r\n' + 'स्टारशिप, \r\n' की संरक्षक + 'चोरी की योजनाएं जो उसे बचा सकती हैं\r\n' + 'लोगों और बहाल\r\n' + 'आजादी द गैलेक्सी...', निर्देशक:'जॉर्ज लुकास', निर्माता:'गैरी कुर्तज़, रिक मैक्कलम', रिलीज़_डेट:' 1977-05-25', वर्ण:[ '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/', 'http:/ /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/', 'http ://swapi.dev/api/people/16/', 'https://swapi.dev/api/people/18/', 'https://swapi.dev/api/people/19/', ' https://swapi.dev/api/people/81/'], ग्रह:[ 'https://swapi.dev/api/planets/1/', 'https://swapi.dev/api/planets/ 2/', 'https://swapi.dev/api/planets/3/'], स्टारशिप:[ '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/', 'http:/ /swapi.dev/api/starships/12/', 'https://swapi.dev/api/starships/13/'], वाहन:[ 'https://swapi.dev/api/vehicles/4/' , 'https://swapi.dev/api/vehicles/6/', 'https://swapi.dev/api/vehicles/7/', 'https://swapi.dev/api/vehicles/8/ ' ], प्रजातियां:[ '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/'], बनाया गया:'2014-12-10T14 :23:31.880000Z', संपादित:'2014-12-20T19:49:45.256000Z', url:'https://swapi.dev/api/films/1/' }

अगर हमें यह जानकारी फ़्रंटएंड पर मिलती है, तो हम इसका उपयोग कार्ड या टेबल को पॉप्युलेट करने के लिए कर सकते हैं या फिर हम इसे प्रदर्शित करना चाहेंगे।

Async/प्रतीक्षा

हम उसी परिणाम को लॉग करने के लिए async/प्रतीक्षा फ़ंक्शन का भी उपयोग कर सकते हैं।

async कीवर्ड हमें बताता है कि उस फ़ंक्शन का कुछ भाग अतुल्यकालिक होगा। जब हम प्रतीक्षित कीवर्ड पर आते हैं, तो स्क्रिप्ट का निष्पादन तब तक रुक जाता है जब तक कि कोड की उस पंक्ति का मूल्यांकन नहीं हो जाता।

हमारे पास दो await हैं इस फ़ंक्शन में कथन, दो then() . के बराबर वादा तर्क में हमारे पास बयान थे। एक स्टेटमेंट हमारे द्वारा पास किए गए URL पर फ़ेचिंग होने की प्रतीक्षा करता है, और दूसरा तब तक प्रतीक्षा करता है जब तक कि प्राप्त जानकारी को JSON में पार्स नहीं कर दिया जाता। हम try/catch . का उपयोग करते हैं किसी भी त्रुटि को पकड़ने के लिए यदि प्रतिक्रियाओं से कुछ असामान्य वापस आता है तो हमें मिल सकता है।

अंतिम नोट

फ़ेच एपीआई को नोड वातावरण में काम करने के लिए (अर्थात यदि आप विजुअल स्टूडियो कोड जैसे आईडीई का उपयोग कर रहे हैं), तो आपको yarn add की आवश्यकता होगी। या npm install node-fetch , क्योंकि फ़ेच केवल ब्राउज़र परिवेश में कार्य करता है।