AJAX и API


Как я могу построить AJAX вызов?

Вместе с React Вы можете использовать любую AJAX-библиотеку, которая вам нравится. Некоторые популярные - это Axios, jQuery AJAX и встроенный в браузер инструмент window.fetch .


Где в жизненном цикле компонента мне следует сделать вызов AJAX?

Чтобы запрашивать данные с помощью AJAX запросов, следует использовать метод жизненного цикла componentDidMount. Затем, когда данные прибудут с сервера, вы сможете использовать setState для обновления состояния вашего компонента.


Пример: использование результата AJAX запроса для обновления локального состояния компонента.

Компонент ниже демонстрирует, как сделать вызов AJAX в componentDidMount для последующего обновления своего локального состояния.

Пример API возвращает объект JSON следующего вида:


Код
    
{
  items: [
    { id: 1, name: 'Apples', price: '$2' },
    { id: 2, name: 'Peaches', price: '$5' }
  ]
}


Код
    
    class MyComponent extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          error: null,
          isLoaded: false,
          items: []
        };
      }
    
      componentDidMount() {
        fetch("https://api.example.com/items")
          .then(res => res.json())
          .then(
            (result) => {
              this.setState({
                isLoaded: true,
                items: result.items
              });
            },
            // Примечание: важно обрабатывать ошибки именно в данном коллбэке,
            // вместо блока catch(), чтобы мы не теряли исключения от
            // реальных багов в компонентах.
            (error) => {
              this.setState({
                isLoaded: true,
                error
              });
            }
          )
      }
    
      render() {
        const { error, isLoaded, items } = this.state;
        if (error) {
          return <div>Error: {error.message}</div>;
        } else if (!isLoaded) {
          return <div>Loading...</div>;
        } else {
          return (
            <ul>
              {items.map(item => (
                <li key={item.name}>
                  {item.name} {item.price}
                </li>
              ))}
            </ul>
          );
        }
      }
    }


Отмена AJAX запроса

Обратите внимание, что если компонент демонтируется до завершения вызова AJAX, вы можете увидеть предупреждение cannot read property 'setState' of undefined. Если эта проблема появилась, вы можете отследить запросы AJAX и отменить их в методе жизненного цикла componentWillUnmount.