React
Reageren AJAX-oproep

HTTP GET-verzoek

Soms moet een component gegevens van een extern eindpunt weergeven (bijvoorbeeld een REST API). Een standaardprocedure is om dergelijke aanroepen te doen in de componentDidMount methode.

Hier is een voorbeeld, waarbij superagent als AJAX-helper wordt gebruikt:

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'))

Een aanvraag kan worden gestart door de juiste methode voor het request roepen en vervolgens .end() aan te roepen om de aanvraag te verzenden. Het instellen van .set() is eenvoudig, roep .set() met een veldnaam en waarde.

De methode .query() accepteert objecten, die in combinatie met de GET-methode een query-string vormen. Het volgende zal het pad /search?query=Manny&range=1..5&order=desc produceren.

POST- aanvragen

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

Zie Superagent-documenten voor meer informatie.

Ajax in React zonder een externe bibliotheek - ook bekend als VanillaJS

Het volgende zou werken in 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'))

HTTP GET-verzoek en gegevens doorlussen

Het volgende voorbeeld laat zien hoe een set gegevens die is verkregen van een externe bron, kan worden weergegeven in een component.

We doen een AJAX-verzoek met behulp van fetch , dat in de meeste browsers is ingebouwd. Gebruik een fetch polyfill in productie om oudere browsers te ondersteunen. U kunt ook elke andere bibliotheek gebruiken om verzoeken in te dienen (bijv. Axios , SuperAgent of zelfs Javascript).

We stellen de gegevens die we ontvangen in als componentstatus, zodat we er toegang toe hebben binnen de rendermethode. Daar doorlopen we de gegevens met behulp van de map . Vergeet niet om altijd een uniek key (of prop) toe te voegen aan het luselement, wat belangrijk is voor de renderingprestaties van 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'));

Werkend voorbeeld op JSBin .