Réagir natif - HTTP

Dans ce chapitre, nous allons vous montrer comment utiliser fetch pour traiter les demandes du réseau.

App.js

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

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

Utiliser Fetch

Nous utiliserons le componentDidMountméthode de cycle de vie pour charger les données du serveur dès que le composant est monté. Cette fonction enverra une requête GET au serveur, retournera des données JSON, enregistrera la sortie vers la console et mettra à jour notre état.

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

Production