ตอบสนองเนทีฟ - HTTP

ในบทนี้เราจะแสดงวิธีการใช้งาน fetch สำหรับการจัดการคำขอเครือข่าย

App.js

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

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

ใช้ Fetch

เราจะใช้ไฟล์ 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

เอาต์พุต