फ़ेच और एक्सियोस का उपयोग करके प्रतिक्रिया में एपीआई का उपभोग कैसे करें

एक एपीआई (एप्लिकेशन प्रोग्रामिंग इंटरफेस) प्रोटोकॉल का एक सेट है जो किसी एप्लिकेशन को सर्वर पर अनुरोध भेजने और प्रतिक्रिया प्राप्त करने की अनुमति देता है।

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

फ़ेच और एक्सियोस का उपयोग करके रिएक्ट में आरईएसटी एपीआई का उपभोग करने का तरीका जानने के लिए, आप एक साधारण रिएक्ट एप्लिकेशन का निर्माण करेंगे जो एक बटन पर क्लिक करने पर एपीआई से बिल्लियों के बारे में एक यादृच्छिक तथ्य प्राप्त करता है।

एपीआई के प्रकार

एपीआई को उपलब्धता या उपयोग के मामले में वर्गीकृत किया जा सकता है। उपलब्धता के संदर्भ में, एपीआई सार्वजनिक, निजी, भागीदार या समग्र एपीआई हो सकते हैं। जब उनके उद्देश्य के अनुसार वर्गीकृत किया जाता है, तो वे हो सकते हैं डेटाबेस, रिमोट, ऑपरेटिंग सिस्टम या वेब एपीआई। इस लेख में, हम एक प्रकार के वेब एपीआई का उपभोग करेंगे जिसे REST (प्रतिनिधि राज्य) कहा जाता है। एपीआई।

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

सम्बंधित: REST API क्या है और आप अपने ऐप या वेबसाइट के लिए डेटा कैसे हड़प सकते हैं?

आवश्यक शर्तें

इस गाइड के साथ पालन करने के लिए, आपके पास होना चाहिए:

• जावास्क्रिप्ट की बुनियादी समझ।
• रिएक्ट और रिएक्ट हुक का बुनियादी ज्ञान।
• NPM आपकी मशीन पर स्थानीय रूप से स्थापित है।
• आपकी पसंद का एक टेक्स्ट एडिटर या आईडीई स्थापित है।

एक प्रतिक्रिया आवेदन बनाएँ

सबसे पहले, आपको एक रिएक्ट एप्लिकेशन बनाना होगा। रिएक्ट डेवलपमेंट एनवायरनमेंट सेट करने के लिए अपने टर्मिनल में निम्न कमांड को कॉपी करें।

एनपीएक्स क्रिएट-रिएक्शन-ऐप कैटफैक्ट

एक बार कमांड निष्पादित होने के बाद, खोलें कैटफ़ैक्ट आपके टेक्स्ट एडिटर में फ़ोल्डर। आप अपना कोड App.js फ़ाइल में लिख रहे होंगे एसआरसी फ़ोल्डर तो आगे बढ़ें और अनावश्यक कोड हटा दें।

आयात "./App.css";
फ़ंक्शन ऐप () {
 वापसी (


एक यादृच्छिक बिल्ली तथ्य के लिए बटन दबाएं!



बिल्ली तथ्य प्राप्त करें



 );
}
निर्यात डिफ़ॉल्ट ऐप;

इसके बाद, एक साधारण यूआई बनाएं जो यादृच्छिक बिल्ली तथ्य प्रदर्शित करने के लिए उपयोग करेगा।

में app.js

आयात './App.css';
फ़ंक्शन ऐप () {
 वापसी (


एक यादृच्छिक बिल्ली तथ्य के लिए बटन दबाएं!



बिल्ली तथ्य प्राप्त करें



 );
}
निर्यात डिफ़ॉल्ट ऐप;

अपने ऐप को स्टाइल करने के लिए, निम्न कोड को इसमें जोड़ें ऐप.सीएसएस फ़ाइल।

@आयात यूआरएल (' https://fonts.googleapis.com/css2?family=Playfair+Display: इटाल, wght@700;500&display=swap');
।अनुप्रयोग {
 फ़ॉन्ट-फ़ैमिली: 'प्लेफ़ेयर डिस्प्ले', सेरिफ़;
 मार्जिन: 20px 15vw;
}
एच2 {
 फ़ॉन्ट-फ़ैमिली: 'प्लेफ़ेयर डिस्प्ले', सेरिफ़;
 फ़ॉन्ट-वजन: 700;
 फ़ॉन्ट-आकार: 3em;
}
बटन {
 पैडिंग: 1em 1.2em;
 सीमा: कोई नहीं;
 फ़ॉन्ट-आकार: 1em;
 पृष्ठभूमि-रंग: #131212;
 रंग: #ffffff;
 सीमा-त्रिज्या: 0.5em;
 कर्सर: सूचक;
}
बटन: होवर {
 पृष्ठभूमि-रंग:#3b3b3b;
}

आपका आवेदन अब इस तरह दिखना चाहिए।

अगले चरणों में, आप एपीआई से डेटा प्राप्त करेंगे और इसे एप्लिकेशन में प्रदर्शित करेंगे।

सम्बंधित: जावास्क्रिप्ट के साथ अपना पहला रिएक्ट ऐप कैसे बनाएं

Fetch. का उपयोग करके REST API का उपभोग करना

फ़ेच एपीआई एक इंटरफ़ेस है जो आपको HTTP अनुरोधों के माध्यम से API से संसाधन प्राप्त करने की अनुमति देता है। लाना() विधि एक अनिवार्य तर्क के रूप में संसाधन के पथ का URL प्राप्त करती है और एक वादा लौटाती है जो प्रतिक्रिया को हल कर सकती है।

का मूल सिंटैक्स लाना() विधि इस प्रकार है:

फ़ेच ('संसाधन के लिए यूआरएल')
 .then (प्रतिक्रिया =>// प्रतिक्रिया संभालें)
 .catch (गलती => // हैंडल एरर)

फ़ेच एपीआई लागू करना

रिएक्ट में, फ़ेच एपीआई का उपयोग उसी तरह किया जाता है जैसे यह सादे जावास्क्रिप्ट में किया जाता है।

लाना(" https://catfact.ninja/fact")
 तब (प्रतिक्रिया => प्रतिक्रिया.जेसन ())
 तब (डेटा => // डेटा संभालें)
 .catch (गलती => // हैंडल एरर)

उपरोक्त कोड में पहली पंक्ति में, आप एपीआई यूआरएल में पास कर रहे हैं लाना() तरीका। लाना() एक HTTP प्रतिक्रिया देता है जिसे JSON में परिवर्तित किया जाता है जेसन () तरीका। तीसरी पंक्ति में, आपको उस डेटा तक पहुंच प्राप्त होती है जिसे आप एप्लिकेशन में उपयोग कर सकते हैं। अंत में, कैच ब्लॉक आपको त्रुटियों को इनायत से संभालने की अनुमति देता है।

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

सम्बंधित: हुक: प्रतिक्रिया का नायक

आयात उपयोगस्टेट और उपयोग प्रभाव।
'प्रतिक्रिया' से आयात {useEffect, useState}

बिल्ली तथ्य और इसे अद्यतन करने के लिए फ़ंक्शन को पकड़ने के लिए एक राज्य बनाएं।

कॉन्स्ट [तथ्य, सेटफैक्ट] = यूज़स्टेट ('')

इसके बाद, एपीआई को जीईटी अनुरोध करने के लिए एक फ़ंक्शन बनाएं और इसे कॉल करें उपयोग प्रभाव हुक

कॉन्स्ट फ़ेचफ़ैक्ट = () => {
लाना(" https://catfact.ninja/fact")
 तब ((प्रतिक्रिया) => प्रतिक्रिया.जेसन ())
 तब ((डेटा) => सेटफैक्ट (डेटा। तथ्य));
}
उपयोग प्रभाव (() => {
 फ़ेचफ़ैक्ट ()
}, []);

आपकी app.js फ़ाइल अब इस तरह दिखनी चाहिए:

आयात "./App.css";
"प्रतिक्रिया" से आयात {useEffect, useState};
फ़ंक्शन ऐप () {
 कॉन्स्ट [तथ्य, सेटफैक्ट] = यूज़स्टेट ("");
 कॉन्स्ट फ़ेचफ़ैक्ट = () => {
 लाना(" https://catfact.ninja/fact")
 तब ((प्रतिक्रिया) => प्रतिक्रिया.जेसन ())
 तब ((डेटा) => सेटफैक्ट (डेटा। तथ्य));
}
उपयोग प्रभाव (() => {
 फ़ेचफ़ैक्ट ()
}, []);
वापसी (


एक यादृच्छिक बिल्ली तथ्य के लिए बटन दबाएं!



बिल्ली तथ्य प्राप्त करें
{तथ्य}




);
}
निर्यात डिफ़ॉल्ट ऐप;

अब आप अपने ब्राउज़र में प्रदर्शित बिल्लियों के बारे में एक यादृच्छिक तथ्य देखने में सक्षम होंगे।

अगला, बटन क्लिक करने पर एक यादृच्छिक तथ्य प्रदर्शित करने के लिए कोड लिखें।

एक शामिल करने के लिए बटन को संशोधित करें क्लिक पर घटना और उसके हैंडलर समारोह।

 हैंडलक्लिक ()}>कैट फैक्ट प्राप्त करें

को परिभाषित करो हैंडलक्लिक () नीचे दिखाए अनुसार कार्य करें।

कॉन्स्ट हैंडलक्लिक = () => {
 फ़ेचफ़ैक्ट ()
}

अब, जब आप बटन पर क्लिक करते हैं, तो हैंडलक्लिक () समारोह कॉल करेगा फ़ेचडाटा () जो एपीआई अनुरोध करेगा और राज्य को एक नए यादृच्छिक तथ्य के साथ अद्यतन करेगा। नतीजतन, एप्लिकेशन UI वर्तमान तथ्य को प्रदर्शित करने के लिए अपडेट होगा।

Axios का उपयोग करके REST API का उपभोग करना

के बजाय लाना(), आप एपीआई का उपभोग कर सकते हैं एक्सिओस. पसंद लाना(), Axios आपको API समापन बिंदु के लिए अनुरोध करने की अनुमति देता है। हालाँकि, दोनों के बीच कई अंतर हैं।

• Axios स्वचालित रूप से JSON में प्रतिक्रिया देता है जबकि आपको इसे फ़ेच एपीआई का उपयोग करते समय JSON में बदलना होता है।
• Fetch API के विपरीत Axios को केवल एक .then() कॉलबैक की आवश्यकता होती है।
• Axios प्रमुख ब्राउज़रों के साथ संगत है जबकि Fetch केवल Chrome 42+, Edge 14+, Firefox 39+ और Safari 10+ में समर्थित है

Axios को लागू करना

निम्न आदेश चलाकर Axios स्थापित करें।

npm अक्ष स्थापित करें

स्थापना पूर्ण होने के बाद, अपने ऐप घटक में Axios पैकेज आयात करें और संशोधित करें फ़ेचफ़ैक्ट () इसका उपयोग करने के लिए कार्य करता है।

'अक्ष' से आयात अक्षतंतु
कॉन्स्ट फ़ेचफ़ैक्ट = () => {
 axios.get(" https://catfact.ninja/fact").then((response) => {
 सेटफैक्ट (प्रतिक्रिया। डेटा। तथ्य)
 });
}

इतना ही! ब्राउज़र में लोड होने पर और जब आप बटन पर क्लिक करते हैं तो आपका एप्लिकेशन यादृच्छिक बिल्ली तथ्य प्रदर्शित करना चाहिए।

प्रतिक्रिया के साथ एपीआई के लिए और अधिक उपयोग

आप विभिन्न तरीकों का उपयोग करके रिएक्ट में REST API का उपभोग कर सकते हैं। इस ट्यूटोरियल में, आपने सीखा कि REST API से यादृच्छिक तथ्य प्राप्त करने के लिए Fetch और Axios का उपयोग कैसे करें। वास्तविक दुनिया के अनुप्रयोगों में एपीआई के उपयोग के मामले अंतहीन हैं।

उदाहरण के लिए, स्ट्राइप और पेपाल जैसे भुगतान एपीआई के माध्यम से, स्टोर स्वयं कार्यक्षमता को लागू किए बिना आसानी से ग्राहक लेनदेन को ऑनलाइन संभाल सकते हैं। इसलिए, कम तकनीक की समझ रखने वाले उपयोगकर्ता भी उपयोगी एप्लिकेशन बना सकते हैं जो उनकी आवश्यकताओं की पूर्ति करते हैं।

एपीआई प्रमाणीकरण क्या है और यह कैसे काम करता है?

आप कैसे साबित करते हैं कि जो व्यक्ति महत्वपूर्ण डेटा तक पहुंचना चाहता है वह वही है जो वे कहते हैं कि वे हैं? यहीं से एपीआई प्रमाणीकरण आता है ...

आगे पढ़िए

लेखक के बारे में