React
Реагировать на вызов AJAX
Поиск…
Запрос HTTP GET
Иногда компонент должен отображать некоторые данные с удаленной конечной точки (например, REST API). Стандартная практика заключается в том, чтобы делать такие вызовы в методе componentDidMount
.
Ниже приведен пример использования суперагента в качестве помощника 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'))
Запрос может быть инициирован путем вызова соответствующего метода в объекте request
, а затем вызова .end()
для отправки запроса. Установка полей заголовка проста, вызывается .set()
с именем и значением поля.
Метод .query()
принимает объекты, которые при использовании с методом GET образуют строку запроса. Далее будет /search?query=Manny&range=1..5&order=desc
путь /search?query=Manny&range=1..5&order=desc
.
Запросы POST
request.post('/user')
.set('Content-Type', 'application/json')
.send('{"name":"tj","pet":"tobi"}')
.end(callback)
Дополнительную информацию см. В документах Superagent .
Ajax in React без сторонней библиотеки - он же с VanillaJS
Следующие действия будут работать в 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-запрос и обработка данных
В следующем примере показано, как набор данных, полученных из удаленного источника, может быть отображен в компонент.
Мы делаем запрос AJAX с использованием fetch
, который встроен в большинство браузеров. Используйте полис для fetch
чтобы поддерживать старые браузеры. Вы также можете использовать любую другую библиотеку для запросов (например, axios , SuperAgent или даже простой Javascript).
Мы устанавливаем данные, которые мы получаем как состояние компонента, поэтому мы можем получить доступ к нему внутри метода рендеринга. Там мы просматриваем данные с помощью map
. Не забудьте всегда добавлять уникальный атрибут key
(или прокрутку) к элементу с петлями, что важно для производительности рендеринга 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'));