React
AJAX-Anruf reagieren
Suche…
HTTP-GET-Anforderung
Manchmal muss eine Komponente einige Daten von einem entfernten Endpunkt (z. B. einer REST-API) wiedergeben. Eine Standardpraxis besteht darin, solche Aufrufe in der Methode componentDidMount
durchzuführen.
Hier ist ein Beispiel, in dem Superagent als AJAX-Helfer verwendet wird:
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'))
Eine Anforderung kann initiiert werden, indem die entsprechende Methode für das request
aufgerufen und anschließend .end()
, um die Anforderung zu senden. Das Setzen von Headerfeldern ist einfach. .set()
mit einem Feldnamen und .set()
.
Die .query()
-Methode akzeptiert Objekte, die bei Verwendung mit der GET-Methode eine .query()
bilden. Im Folgenden wird der Pfad /search?query=Manny&range=1..5&order=desc
.
POST- Anfragen
request.post('/user')
.set('Content-Type', 'application/json')
.send('{"name":"tj","pet":"tobi"}')
.end(callback)
Weitere Informationen finden Sie unter Superagent-Dokumente .
Ajax in React ohne Bibliothek von Drittanbietern - auch bekannt mit VanillaJS
Folgendes würde in IE9 + funktionieren
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-Anforderung und Durchschleifen von Daten
Das folgende Beispiel zeigt, wie ein aus einer Remote-Quelle erhaltener Datensatz in eine Komponente gerendert werden kann.
Wir erstellen eine AJAX-Anfrage mit fetch
, das in die meisten Browser integriert ist. Verwenden Sie einen fetch
polyfill in Produktion ältere Browser zu unterstützen. Sie können auch jede andere Bibliothek für Anfragen verwenden (z. B. Axios , SuperAgent oder sogar einfaches Javascript).
Die Daten, die wir erhalten, werden als Komponentenzustand festgelegt, sodass wir innerhalb der Render-Methode darauf zugreifen können. Dort durchlaufen wir die Daten mit einer map
. Vergessen Sie nicht, dem Loop-Element immer ein eindeutiges key
(oder eine Eigenschaft ) hinzuzufügen, was für die Renderleistung von React wichtig ist.
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'));