सर्वर से डेटा लोड करने के लिए आप fetch API का उपयोग कर सकते हैं जो XMLHttpRequest या किसी अन्य नेटवर्किंग API के समान है।
fetch का उपयोग करके सर्वर पर अनुरोध करना बहुत आसान है। निम्न कोड पर एक नज़र डालें:
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then((response) => response.json())
.then((responseJson) => console.log(responseJson));
उपरोक्त कोड में हम JSON फ़ाइल https://jsonplaceholder.typicode.com/posts/1 को फेच कर रहे हैं और डेटा को कंसोल पर प्रिंट कर रहे हैं। fetch() API का सबसे सरल कॉल एक आर्गुमेंट लेता है यानी वह पथ जिसे आप फेच करना चाहते हैं और यह प्रतिक्रिया के साथ एक प्रॉमिस लौटाता है।
fetch API HTTP प्रतिक्रिया के साथ एक प्रॉमिस लौटाता है, प्रतिक्रिया से JSON बॉडी प्राप्त करने के लिए हमें json() मेथड का उपयोग करने की आवश्यकता होती है।
fetch API का दूसरा पैरामीटर एक ऑब्जेक्ट है जिसमें मेथड यानी (GET, POST), हेडर्स, आप जो डेटा पोस्ट करना चाहते हैं आदि हो सकते हैं।
यहां एक कार्यात्मक उदाहरण दिया गया है जो दिखाता है कि सर्वर से डेटा कैसे प्राप्त करें और उपयोगकर्ता को प्रदर्शित करें।
उदाहरण: fetch API का उपयोग करके GET डेटा
डेटा को शुरू में खाली इनिशियलाइज़ किया जाता है जैसा कि नीचे दिखाया गया है:
state = {
data: ''
}
componentDidMount() के बारे में विवरण
fetch API को componentDidMount() फ़ंक्शन के अंदर कॉल किया जाता है। componentDidMount() को कंपोनेंट के माउंट होने के तुरंत बाद कॉल किया जाता है यानी सभी एलिमेंट्स पेज पर रेंडर होने के बाद।
इसके लिए कोड यहां दिया गया है:
componentDidMount = () => {
fetch('https://jsonplaceholder.typicode.com/posts/1', {
method: 'GET'
})
.then((response) => response.json())
.then((responseJson) => {
console.log(responseJson);
this.setState({
data: responseJson
})
})
.catch((error) => {
console.error(error);
});
}
url से डेटा: https://jsonplaceholder.typicode.com/posts/1 निम्नानुसार है:
{
"userId": 1,
"id": 1,
"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
"body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
}
हम body के अंदर टेक्स्ट प्रदर्शित करने में रुचि रखते हैं।
data वेरिएबल को setState मेथड का उपयोग करके अपडेट किया जाता है जैसा कि नीचे दिखाया गया है:
this.setState({
data: responseJson
})
अब this.state.data.body में सर्वर से डेटा है जिसे उपयोगकर्ता को प्रदर्शित करने के लिए उपयोग किया जा सकता है जैसा कि नीचे दिखाया गया है:
render() {
return (
{this.state.data.body}
)
}
fetch API का उपयोग करके सर्वर से डेटा प्राप्त करने का कार्यात्मक कोड यहां दिया गया है:
import React, { Component } from "react";
import { Text, View } from "react-native";
class HttpExample extends Component {
state = {
data: ''
}
componentDidMount = () => {
fetch('https://jsonplaceholder.typicode.com/posts/1', {
method: 'GET'
})
.then((response) => response.json())
.then((responseJson) => {
console.log(responseJson);
this.setState({
data: responseJson
})
})
.catch((error) => {
console.error(error);
});
}
render() {
return (
{this.state.data.body}
)
}
}
const App = () => {
return (
आउटपुट
