आज हम जो एप्लिकेशन बनाते हैं उनमें से अधिकांश एपीआई के माध्यम से बाहरी स्रोतों से डेटा का उपभोग करते हैं। वे एक सर्वर से डेटा प्राप्त करते हैं और इसे अपने UI में प्रदर्शित करते हैं।

रिएक्ट का उपयोग करके, आप एपीआई से डेटा लाने के लिए एक कस्टम हुक बना सकते हैं। एक URL को देखते हुए, यह हुक डेटा और एक वैकल्पिक त्रुटि संदेश वाली वस्तु लौटाएगा। फिर आप इस हुक का उपयोग एक घटक में कर सकते हैं।

एक कस्टम रिएक्ट हुक बनाना

UseFetch.js नामक एक नई फ़ाइल बनाकर प्रारंभ करें। इस फ़ाइल में, useFetch() नामक एक फ़ंक्शन बनाएं जो एक URL स्ट्रिंग को एक पैरामीटर के रूप में स्वीकार करता है।

स्थिरांक यूज़फ़ेच = (यूआरएल) => {
}

हुक चाहिए एपीआई कॉल करें इसे बुलाए जाने के तुरंत बाद। आप का उपयोग कर सकते हैं उपयोग प्रभाव () हुक इसके लिए।

वास्तविक API कॉल के लिए, फ़ेच API का उपयोग करें। यह एपीआई एक वादा-आधारित इंटरफ़ेस है जो आपको HTTP पर अतुल्यकालिक रूप से अनुरोध करने और प्रतिक्रियाएँ प्राप्त करने की अनुमति देता है।

UseFetch() कस्टम हुक में, निम्नलिखित जोड़ें।

आयात {उपयोग प्रभाव, यूजस्टेट} से "प्रतिक्रिया";
स्थिरांक यूज़फ़ेच = (यूआरएल) => {





instagram viewer


स्थिरांक [डेटा, सेटडेटा] = यूज़स्टेट (शून्य);
स्थिरांक [लोडिंग, सेटलोडिंग] = यूज़स्टेट (सच);
 कॉन्स्ट [त्रुटि, सेटरर] = यूज़स्टेट ("");


उपयोग प्रभाव (() => {
 फ़ेच (यूआरएल)
 तब ((रेस) => रेस.जेसन ())
 तब ((डेटा) => {
सेटटेरर(जानकारी।गलती)
सेटडेटा(जानकारी।मज़ाक)
 सेटलोडिंग (असत्य)
 })
 }, [यूआरएल]);


वापसी {डेटा, लोड हो रहा है, त्रुटि};
};
निर्यात करनाचूक उपयोग फ़ेच;

इस हुक में, आप पहले तीन मानों की स्थिति को प्रारंभ कर रहे हैं:

  • डेटा: एपीआई प्रतिक्रिया रखता है।
  • त्रुटि: यदि कोई त्रुटि होती है तो एक त्रुटि संदेश रखता है।
  • लोड हो रहा है: एक बूलियन मान रखता है जो इंगित करता है कि उसने एपीआई डेटा प्राप्त किया है या नहीं। लोडिंग स्थिति को सत्य पर प्रारंभ करें। एक बार जब एपीआई डेटा लौटाता है, तो उसे गलत पर सेट करें।

useEffect() हुक URL स्ट्रिंग को एक तर्क के रूप में लेता है। यह सुनिश्चित करने के लिए है कि यह हर बार URL बदलने पर चलता है।

UseFetch () फ़ंक्शन डेटा, लोडिंग और त्रुटि मान वाले ऑब्जेक्ट को वापस कर देगा।

रिएक्ट कस्टम हुक का उपयोग करना

आपके द्वारा अभी बनाए गए useFetch() कस्टम हुक का उपयोग करने के लिए, इसे आयात करके शुरू करें:

स्थिरांक उपयोग फ़ेच = ज़रूरत होना("./useFetch")

फिर इसे इस प्रकार उपयोग करें:

स्थिरांक {डेटा, लोड हो रहा है, गड़बड़ी} = यूज़फ़ेच (यूआरएल)

प्रदर्शित करने के लिए, निम्नलिखित चुटकुले घटक पर विचार करें:

स्थिरांक चुटकुले = () => {
 कॉन्स्ट यूआरएल = "<https://sv443.net/jokeapi/v2/joke/Programming? टाइप = सिंगल>";
स्थिरांक {डेटा, लोड हो रहा है, त्रुटि} = useFetch (url);
यदि (लोड हो रहा है) वापसी (
<डिव>लोड हो रहा है...</div>
 )


वापसी (
<डिव>
 {गलती &&<डिव>{गलती}</div>}
 {जानकारी &&<डिव>{<डिव>{जानकारी}</div>}</div>}
</div>
 );
};
निर्यात करनाचूक चुटकुले;

यह URL के साथ useFetch () हुक को जोक्स API पर कॉल करता है और डेटा, लोडिंग और त्रुटि मान प्राप्त करता है।

चुटकुले घटक को प्रस्तुत करने के लिए, पहले जांच लें कि लोड हो रहा है या नहीं। यदि ऐसा है, तो "लोड हो रहा है ..." कथन प्रदर्शित करें अन्यथा डेटा और त्रुटि संदेश प्रस्तुत करें यदि कोई हो।

कस्टम रिएक्ट हुक का उपयोग क्यों करें?

जैसे आपने इस घटक में useFetch() कस्टम हुक का उपयोग किया है, वैसे ही आप इसे अन्य घटकों में पुन: उपयोग कर सकते हैं। यह तर्क को प्रत्येक घटक में लिखने के बजाय हुक में बाहरी करने की सुंदरता है।

हुक रिएक्ट की एक शक्तिशाली विशेषता है जिसका उपयोग आप अपने कोड की प्रतिरूपकता को बेहतर बनाने के लिए कर सकते हैं।