React JS: Axios, API и получение данных с randomuser.me

Хранение данных пользователей

Ранее пользователи хранились внутри проекта в массиве users. Этот массив перебирался в цикле и выводился на сайт. Теперь будем использовать внешний ресурс.

Использование API randomuser.me

Для получения тестовых данных воспользуемся ресурсом randomuser.me. Этот сайт предоставляет случайную информацию в формате JSON по определённым URL-адресам. Мы будем использовать его для получения списка пользователей. По определённому URL получаем данные JSON и обрабатываем их.

Установка Axios

Для работы с API понадобится библиотека Axios. Установим её через терминал:

npm i axios

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

Получение данных с API

В файле App.js импортируем Axios:

import axios from 'axios';

Создадим константу для базового URL:

const baseUrl = 'https://randomuser.me/api/?results=10';

(Используем /api/?results=10 для получения 10 пользователей. Можно использовать /api/?results=1 для одного пользователя или другое значение для изменения количества. Рассмотрите использование /api/ без параметра results для получения пользователей по одному или пагинацию для обработки большого количества.)

Далее, внутри конструктора, выполним запрос к API с помощью Axios:

axios.get(baseUrl)
  .then(response => {
    // Обработка полученных данных
    console.log(response.data);
    this.setState({ users: response.data.results });
  });

Метод .then() обрабатывает ответ сервера. Получаем объект response. Выведем полученные данные в консоль и обновим состояние компонента users.

Обработка данных и отображение на сайте

Ключи в полученных данных (first_name, last_name) отличаются от используемых в компоненте (firstName, lastName). Изменим названия ключей в компоненте User или в обработке данных.

Изменим компонент User:

// В компоненте User
<p>Имя: {user.name.first}</p>
<p>Фамилия: {user.name.last}</p>

Теперь отображаются имя, фамилия, email и аватар пользователя (user.picture.large).

Мы научились получать данные из внешнего API с помощью Axios и отображать их на сайте. Необходимо учитывать разницу в именовании ключей. Функционал добавления, удаления и редактирования пользователей продолжает работать корректно. Осталось изменить названия полей в форме для соответствия получаемым данным.