En este capítulo, le mostraremos cómo utilizar fetch para manejar solicitudes de red.
App.js
import React from 'react';
import HttpExample from './http_example.js'
const App = () => {
return (
<HttpExample />
)
}
export default App
Usando Fetch
Usaremos el componentDidMountmétodo de ciclo de vida para cargar los datos desde el servidor tan pronto como se monte el componente. Esta función enviará una solicitud GET al servidor, devolverá datos JSON, registrará la salida en la consola y actualizará nuestro estado.
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
Salida