React Native - HTTP
Di bab ini, kami akan menunjukkan cara menggunakan fetch untuk menangani permintaan jaringan.
App.js
import React from 'react';
import HttpExample from './http_example.js'
const App = () => {
return (
<HttpExample />
)
}
export default App
Menggunakan Fetch
Kami akan menggunakan componentDidMountmetode siklus hidup untuk memuat data dari server segera setelah komponen dipasang. Fungsi ini akan mengirim permintaan GET ke server, mengembalikan data JSON, output log ke konsol, dan memperbarui status kita.
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