Запросы AJAX в React: Как и Где извлекать данные

Один из первых вопросов, который возникли у разработчиков React: «Как мне выполнить запросы AJAX в React?»

Вот ответ на этот вопрос.

Во-первых, у самой React нет никакой преданности какому-либо конкретному способу извлечения данных. На самом деле, что касается React, он даже не знает, что на картинке вообще есть “сервер”.

React просто отображает компоненты, используя данные только из двух мест: props и state.

Поэтому, чтобы использовать некоторые данные с сервера, вам необходимо получить эти данные в реквизитах или состоянии ваших компонентов.

Вы можете усложнить этот процесс с помощью сервисов и моделей данных (er, «строить абстракции») столько, сколько хотите, но в конечном итоге это просто компоненты, отображающие props и state.

Выберите HTTP-библиотеку

Чтобы получить эти данные с сервера, вам понадобится HTTP-библиотека. Там их много. В конечном счете все они делают то же самое, но у них разные функции.

Нравится обещания? Продолжайте с axios

Ненравится обещания, но любовь вызывает обратную связь? Взгляните на superagent.

Скорее используйте что-то скоро-стандартизованное? fetch может быть вашей любимой.

Дело в том, что это не имеет большого значения. Там нет «лучшего».

Некоторые скажут, что fetch является лучшей, потому что она почти стандартная, но я готов поспорить, что даже после того, как она на самом деле является стандартом, будут продолжаться конкурирующие библиотеки HTTP, которые люди будут продолжать использовать и предпочитают. Так что используйте то, что вам нравится.

Мне нравятся axios, и вот что я покажу здесь. Но если серьезно, если вам почему-то не нравится, взгляните на один из других вариантов.

Получить Данные

Вот простой примерный компонент, который извлекает сообщения из subreddit ( /r/reactjs в этом случае). Взгляните на него, и мы рассмотрим, как это работает.

import React from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';

class FetchDemo extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      posts: []
    };
  }

  componentDidMount() {
    axios.get(`http://www.reddit.com/r/${this.props.subreddit}.json`)
      .then(res => {
        const posts = res.data.data.children.map(obj => obj.data);
        this.setState({ posts });
      });
  }

  render() {
    return (
      <div>
        <h1>{`/r/${this.props.subreddit}`}</h1>
        <ul>
          {this.state.posts.map(post =>
            <li key={post.id}>{post.title}</li>
          )}
        </ul>
      </div>
    );
  }
}

ReactDOM.render(
  <FetchDemo subreddit="reactjs"/>,
  document.getElementById('root')
);

Как это работает

Сначала мы импортируем библиотеку axios:

 import axios from 'axios'; 

Конструктор довольно стандартный: вызовите super, затем инициализируйте состояние, чтобы иметь пустой массив posts.

componentDidMount - это место, где происходит волшебство. Этот метод будет выполнен, когда компонент «монтируется» (добавляется в DOM) в первый раз. Этот метод выполняется только один раз во время жизни компонента.

TL;DR: выбор данных сервера в методе жизненного цикла componentDidMount

Он использует функцию axios.get для извлечения данных из subreddit, основываясь на subreddit пропущенной во время рендеринга внизу. Backticks являются строкой шаблона ES6 и, вероятно, делают то, что вы думаете: часть ${...} заменяется значением этого выражения, поэтому URL-адрес, переданный в axios.get на самом деле является http://www.reddit.com/r/reactjs.json .

Здесь есть две вещи, характерные для Reddit:

• Вы можете наложить на .json конец любого URL-адреса субредакта и там получить представление JSON постов.

• Если вы забудете www вы получите ошибку CORS (по крайней мере, я получил).

Поскольку Axios использует обещания, мы соединяем вызов с. .then для обработки ответа. posts извлекаются после небольшого преобразования, а затем важный бит:

Состояние компонента обновляется путем вызова this.setState с новым массивом сообщений. Это вызывает повторную визуализацию, а затем сообщения видны.

Вот и все!

Бонус: Индикатор Загрузки

Можете ли вы придумать, как изменить код, чтобы добавить сообщение «Загрузка ...» (Loading...) во время запроса?

Подсказка: установите флаг в состояние, которое будет переключаться после завершения запроса. Используйте этот флаг в функции рендеринга, чтобы показать индикатор загрузки.

Получите код!(с испытаниями)

Разархивируйте его, запустите npm install, затем npm start.

Вы также можете быть заинтересованы в моей книге, потому что она учит React, начиная с основ.