रिएक्टिव नेटिव - एचटीटीपी

इस अध्याय में, हम आपको बताएंगे कि कैसे उपयोग करना है fetch नेटवर्क अनुरोधों को संभालने के लिए।

App.js

import React from 'react';
import HttpExample from './http_example.js'

const App = () => {
   return (
      <HttpExample />
   )
}
export default App

फ़ेच का उपयोग करना

हम उपयोग करेंगे componentDidMountघटक के माउंट होते ही सर्वर से डेटा लोड करने के लिए जीवनचक्र विधि। यह फ़ंक्शन सर्वर को GET अनुरोध भेजेगा, JSON डेटा लौटाएगा, कंसोल को लॉग इन करेगा और हमारे राज्य को अपडेट करेगा।

http_example.js

import React, { Component } from 'react'
import { View, Text } 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 (
         <View>
            <Text>
               {this.state.data.body}
            </Text>
         </View>
      )
   }
}
export default HttpExample

उत्पादन