Итак, вы новичок в React и ищете способ делать ajax-запросы, тогда это руководство для вас.

В этом уроке мы узнаем, как сделать вызов ajax, используя реакцию и Axios. Но сначала нам нужно настроить наш реактивный проект. Для этой цели мы собираемся использовать шаблон Facebook Create React App.

Но подождите, я забыл упомянуть здесь одну важную вещь. Нам нужно установить nodejs на нашу машину. Если nodejs уже установлен на вашем компьютере, то спасибо вам. Но если нет, вот несколько ресурсов, которые помогут вам, если вы используете Windows, MacOS или Linux.

Настройка проекта

Запустите следующую команду в своем терминале

npx create-react-app react-ajax

npx поставляется с npm 5.2+ и выше.

Теперь перейдите в каталог вашего проекта

cd react-ajax

И, наконец, выполните следующую команду, чтобы запустить приложение.

npm start

Команда npm start автоматически открывает ваш браузер и запускает ваше приложение в http://localhost:3000/.

Время сделать запрос Ajax.

Теперь у нас есть настроенный и запущенный проект. Посмотрите в папке src, вы найдете имя файла app.js. Откройте этот файл в своем любимом редакторе и удалите все лишнее. После редактирования app.js файл выглядит так.

import React, { Component } from 'react';
class App extends Component {
  render() {
    return (
      <div>
      
      </div>
    );
  }
}
export default App;

Теперь пришло время добавить наш HTTP-клиент Axios. Запустите следующую команду в своем терминале. Он добавляет Axios в наш проект.

npm install axios

Следующим шагом будет добавление Axios в наш app.js с помощью модуля импорта ES6.

import axios from axios

Мы добавили Axios в наше приложение React, но нам нужен API для выполнения запросов. Для этого мы можем использовать случайный пользовательский API и реагировать на метод жизненного цикла componentDidMount, чтобы инициировать запрос ajax.

Почему в компонентеDidMount?

Если у вас есть вопрос, подобный приведенному выше, вот ответ из официального документа.

› componentDidMount() вызывается сразу после монтирования компонента (вставки в дерево). Инициализация, требующая узлов DOM, должна идти здесь. Если вам нужно загрузить данные с удаленной конечной точки, это хорошее место для создания экземпляра сетевого запроса.

componentDidMount() {
    axios.get('https://randomuser.me/api/?results=50')
      .then(response =&gt; {
          console.log(response);
      })
      .catch(error =&gt; {
        console.log(error);
      })
  }

В это время, если вы перезагрузите браузер и посмотрите на консоль, вы увидите следующий вывод в консоли.

Это показывает, что вы успешно сделали вызов ajax, используя реакцию и Axios. Теперь пришло время показать ответ API (информацию о пользователе) в браузере. Так чего же вы ждете, давайте посмотрим, как мы можем этого добиться. Поместите следующий код над методом componentDidMount.

constructor(props) {
    super(props);
    this.state = { 
      data : []
    };
}

Приведенный выше код устанавливает состояние для нашего приложения. Если вы хотите узнать больше о состоянии React, прочитайте эту статью.

Теперь нам также нужно обновить наш метод componentDidMount, как показано ниже.

componentDidMount() {
  axios.get('https://randomuser.me/api/?results=50')
    .then(response =&gt; {
        const data = response.data.results;
        this.setState({data})
    })
    .catch(error =&gt; {
       console.log(error);
    })
}

Добавьте следующую строку кода в метод рендеринга класса приложения.

render() {
  return (
     <div>
       { this.state.data.map((item, index) =&gt; ) }
     </div>
  );  
}

Давайте сделаем компонент UserList ниже компонента App.

const UserList = (props) =&gt; (         
    <p><strong>name : </strong> {props.name.first}</p>
)

И, наконец, наш app.js файл будет выглядеть так.

import React, { Component } from 'react';
import axios from 'axios'
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: []
    };
  }
  componentDidMount() {
    axios.get('https://randomuser.me/api/?results=50')
      .then(response =&gt; {
          const data = response.data.results;
           this.setState({data})
      })
      .catch(error =&gt; {
        console.log(error);
      })
  }
  render() {
    return (
      <div>
              { this.state.data.map((item, index) =&gt; ) }
      </div>
    );
  }
}
const UserList = (props) =&gt; (         
    <p><strong>name : </strong> {props.name.first}</p>
)
export default App;

Вы можете увидеть запуск приложения в codesandbox или ниже:

https://codesandbox.io/embed/jv73ynwz05?fontsize=14