रिएक्ट नेटिव में सर्वर से डेटा कैसे लोड करें?

सर्वर से डेटा लोड करने के लिए आप fetch API . का उपयोग कर सकते हैं जो XMLHttpRequest . के समान है या कोई अन्य नेटवर्किंग एपीआई।

फ़ेच का उपयोग करके सर्वर से अनुरोध करना बहुत आसान है। निम्नलिखित कोड पर एक नज़र डालें -

fetch('https://jsonplaceholder.typicode.com/posts/1') .then((response) => response.json()) .then((responseJson) => console.log(responseJson));

उपरोक्त कोड में हम JSON फ़ाइल https://jsonplaceholder.typicode.com/posts/1 ला रहे हैं और डेटा को कंसोल पर प्रिंट कर रहे हैं। लाने के लिए सबसे सरल कॉल () एपीआई एक तर्क में लेता है यानी वह पथ जिसे आप प्राप्त करना चाहते हैं और यह प्रतिक्रिया के साथ एक वादा देता है।

फ़ेच एपीआई HTTP प्रतिक्रिया के साथ एक वादा देता है, JSON बॉडी को प्रतिक्रिया से प्राप्त करने के लिए हमें json() विधि का उपयोग करने की आवश्यकता होती है।

फ़ेच एपीआई के लिए दूसरा परम, एक ऐसी वस्तु है जिसमें विधि हो सकती है यानी (GET, POST), हेडर, वह डेटा जिसे आप पोस्ट करना चाहते हैं आदि।

यहां एक कार्यशील उदाहरण दिया गया है जो दिखाता है कि सर्वर से डेटा कैसे प्राप्त करें और उपयोगकर्ता को कैसे प्रदर्शित करें।

उदाहरण:फ़ेच API का उपयोग करके डेटा प्राप्त करें

डेटा को प्रारंभ में खाली करने के लिए प्रारंभ किया जाता है जैसा कि नीचे दिखाया गया है -

ComponentDidMount()

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

यहाँ उसी के लिए कोड है -

componentDidMount =() => {fetch('https://jsonplaceholder.typicode.com/posts/1', {विधि:'GET'}) .then((response) => response.json()) .then((responseJson) => { कंसोल। पूर्व> 

 यूआरएल से डेटा:https://jsonplaceholder.typicode.com/posts/1 इस प्रकार है -
 
{ "userId":1, "id":1, "title":"sunt aut facere repellat provdent occaecati अपवादात्मक optio reprehenderit", "body":"quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae यूट यूट क्वास टोटम\nostrum rerum इस्ट ऑटम सनट रेम इवनिएट आर्किटेक्टो"}
 

 हम टेक्स्ट को बॉडी के अंदर प्रदर्शित करने में रुचि रखते हैं।
 

 डेटा वैरिएबल को सेटस्टेट विधि का उपयोग करके अपडेट किया जाता है जैसा कि नीचे दिखाया गया है -
 
this.setState({ data:responseJson})
 

 तो अब this.state.data.body के पास सर्वर से डेटा है जिसका उपयोग उपयोगकर्ता को प्रदर्शित करने के लिए किया जा सकता है जैसा कि नीचे दिखाया गया है -
 
रेंडर() {रिटर्न ( <देखें> <टेक्स्ट> {this.state.data.body}   )}
 

 फ़ेच एपी का उपयोग करके सर्वर से डेटा प्राप्त करने के लिए कार्य कोड यहां दिया गया है -
 <पूर्व>आयात प्रतिक्रिया, {घटक} "प्रतिक्रिया" से; आयात {पाठ, देखें} "प्रतिक्रिया-मूल" से; वर्ग HttpExample का विस्तार घटक {राज्य ={डेटा:''} घटकडिडमाउंट =() => {प्राप्त करें (' https://jsonplaceholder.typicode.com/posts/1', {विधि:'GET'}) .then((response) => response.json()) .then((responseJson) => { कंसोल.लॉग( responseJson); यह। State.data.body}   ) }}const App =() => {रिटर्न (  )}निर्यात डिफ़ॉल्ट ऐप

आउटपुट