React
Reaguj połączenie AJAX
Szukaj…
Żądanie HTTP GET
Czasami składnik musi renderować niektóre dane ze zdalnego punktu końcowego (np. Interfejsu API REST). Standardową praktyką jest wykonywanie takich wywołań w metodzie componentDidMount
.
Oto przykład użycia superagenta jako pomocnika 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'))
Żądanie można zainicjować, wywołując odpowiednią metodę na obiekcie request
, a następnie wywołując .end()
celu wysłania żądania. Ustawienie pól nagłówka jest proste, wywołaj .set()
z nazwą i wartością pola.
Metoda .query()
akceptuje obiekty, które użyte razem z metodą GET utworzą ciąg zapytania. Poniższe spowoduje utworzenie ścieżki /search?query=Manny&range=1..5&order=desc
.
Żądania POST
request.post('/user')
.set('Content-Type', 'application/json')
.send('{"name":"tj","pet":"tobi"}')
.end(callback)
Aby uzyskać więcej informacji, zobacz Dokumenty Superagenta .
Ajax w React bez biblioteki innej firmy - znany również jako VanillaJS
Poniższe działałoby w 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'))
Żądanie HTTP GET i zapętlanie danych
Poniższy przykład pokazuje, jak zestaw danych uzyskanych ze zdalnego źródła można przekształcić w komponent.
Zgłaszamy żądanie AJAX za pomocą funkcji fetch
, która jest wbudowana w większość przeglądarek. Użyj funkcji fetch
wielopełniacza podczas produkcji, aby obsługiwać starsze przeglądarki. Możesz także użyć dowolnej innej biblioteki do tworzenia żądań (np. Axios , SuperAgent , a nawet zwykły Javascript).
Ustawiamy otrzymywane dane jako stan komponentu, abyśmy mogli uzyskać do nich dostęp w metodzie renderowania. Tam przeglądamy dane za pomocą map
. Nie zapomnij zawsze dodawać unikalnego key
atrybutu (lub rekwizytu) do zapętlonego elementu, co jest ważne dla wydajności renderowania 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'));