React
Reagera AJAX-samtal

HTTP GET-begäran

Ibland behöver en komponent återge vissa data från en fjärrändpunkt (t.ex. ett REST-API). En vanlig praxis är att ringa sådana samtal i componentDidMount metoden.

Här är ett exempel och använder superagent som AJAX-hjälpare:

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

En begäran kan initieras genom att påkalla lämplig metod i request objektet och sedan ringa .end() att skicka begäran. Att ställa in huvudfält är enkelt, anropa .set() med ett fältnamn och värde.

.query() accepterar objekt som när de används med GET-metoden kommer att bilda en frågesträng. Följande kommer att skapa sökvägen /search?query=Manny&range=1..5&order=desc .

POST- förfrågningar

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

Mer information finns i Superagent-dokument .

Ajax in React utan ett tredjepartsbibliotek - alias med VanillaJS

Följande skulle fungera i 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-förfrågan och looping genom data

Följande exempel visar hur en uppsättning data som erhållits från en fjärrkälla kan återges till en komponent.

Vi gör en AJAX-begäran med hjälp av fetch , som är inbyggd i de flesta webbläsare. Använd en fetch polyfyll i produktionen för att stödja äldre webbläsare. Du kan också använda alla andra bibliotek för att göra förfrågningar (t.ex. axios , SuperAgent eller till och med vanligt Javascript).

Vi ställer in de data vi får som komponenttillstånd, så att vi kan komma åt dem i renderingsmetoden. Där slår vi igenom data med hjälp av map . Glöm inte att alltid lägga till en unik key attribut (eller prop) till slinga element, vilket är viktigt för Reagera s rendering prestanda.

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

Arbetande exempel på JSBin .