React
Réagissez à l'appel AJAX

Demande HTTP GET

Parfois, un composant doit afficher des données à partir d'un point de terminaison distant (par exemple, une API REST). Une pratique courante consiste à effectuer de tels appels dans la méthode componentDidMount .

Voici un exemple d'utilisation de superagent en tant qu'assistant AJAX:

import React from 'react'
import request from 'superagent'

class App extends React.Component {
  constructor () {
    super()
    this.state = {}
  }
  componentDidMount () {
    request
      .get('/search')
      .query({ query: 'Manny' })
      .query({ range: '1..5' })
      .query({ order: 'desc' })
      .set('API-Key', 'foobar')
      .set('Accept', 'application/json')
      .end((err, resp) => {
        if (!err) {
          this.setState({someData: resp.text})
        }
      })
  },
  render() {
    return (
      <div>{this.state.someData || 'waiting for response...'}</div>
    )
  }
}

React.render(<App />, document.getElementById('root'))

Une demande peut être lancée en appelant la méthode appropriée sur l'objet de request , puis en appelant .end() pour envoyer la demande. Définir des champs d'en-tête est simple, .set() avec un nom de champ et une valeur.

La méthode .query() accepte les objets qui, utilisés avec la méthode GET, formeront une chaîne de requête. Ce qui suit produira le chemin /search?query=Manny&range=1..5&order=desc .

Demandes POST

request.post('/user')
  .set('Content-Type', 'application/json')
  .send('{"name":"tj","pet":"tobi"}')
  .end(callback)

Reportez- vous à la documentation de Superagent pour plus de détails.

Ajax in React sans une bibliothèque tierce - aka avec VanillaJS

Ce qui suit fonctionnerait dans IE9 +

import React from 'react'

class App extends React.Component {
  constructor () {
    super()
    this.state = {someData: null}
  }
  componentDidMount () {
    var request = new XMLHttpRequest();
    request.open('GET', '/my/url', true);
    
    request.onload = () => {
      if (request.status >= 200 && request.status < 400) {
        // Success!
        this.setState({someData: request.responseText})
      } else {
        // We reached our target server, but it returned an error
        // Possibly handle the error by changing your state.
      }
    };
    
    request.onerror = () => {
      // There was a connection error of some sort.
      // Possibly handle the error by changing your state.
    };
    
    request.send();
  },
  render() {
    return (
      <div>{this.state.someData || 'waiting for response...'}</div>
    )
  }
}

React.render(<App />, document.getElementById('root'))

Demande HTTP GET et mise en boucle des données

L'exemple suivant montre comment un ensemble de données provenant d'une source distante peut être rendu dans un composant.

Nous effectuons une requête AJAX en utilisant fetch , qui est intégrée à la plupart des navigateurs. Utilisez un polyfill d' fetch en production pour prendre en charge les anciens navigateurs. Vous pouvez également utiliser toute autre bibliothèque pour effectuer des requêtes (par exemple, axios , SuperAgent , ou même Javascript).

Nous définissons les données que nous recevons comme état du composant, nous pouvons donc y accéder à l'intérieur de la méthode de rendu. Là, nous parcourons les données en utilisant la map . N'oubliez pas de toujours ajouter un attribut de key unique (ou prop) à l'élément en boucle, ce qui est important pour les performances de rendu de React.

import React from 'react';

class Users extends React.Component {
  constructor() {
    super();
    this.state = { users: [] };
  }

  componentDidMount() {
    fetch('/api/users')
      .then(response => response.json())
      .then(json => this.setState({ users: json.data }));
  }

  render() {
    return (
      <div>
        <h1>Users</h1>
        {
          this.state.users.length == 0
            ? 'Loading users...'
            : this.state.users.map(user => (
              <figure key={user.id}>
                <img src={user.avatar} />
                <figcaption>
                  {user.name}
                </figcaption>
              </figure>
            ))
        }
      </div>
    );
  }
}

ReactDOM.render(<Users />, document.getElementById('root'));

Exemple de travail sur JSBin .