Загрузка и отображение данных из API с помощью React
В этой статье мы научимся запрашивать данные из стороннего API с помощью React. Это открытый API, поэтому аутентификация не требуется.
Мы будем использовать открытый API Game of Thrones для извлечения и отображения всех частей Game of Thrones вместе с подробной информацией о каждой книге.
Задача: получение списка из API
Из API мы получаем данные в формате JSON. Затем они преобразовываются в стандартные объекты JavaScript. Списки, импортированные через API, представляют собой массив объектов, содержащих отдельные данные.
Основные этапы реализации:
- Получение данных из API при нажатии кнопки «Fetch Data».
- Отображение информации из полученных данных.
Изначальный код
Для начала создайте копию этого кода на CodeSandbox. Он содержит:
- URL-адрес API для выполнения GET-запроса.
- Стили в файле
styles.css. - Шаблон JSX для каждого полученного объекта.
Подсказка
Обратите внимание на использование Axios для выполнения GET-запросов к REST API. А также на использование метода .map() для визуализации данных массива. Посмотрите, как должна выглядеть итоговая страница.
Решение: загрузка и отображение данных из API
Мы будем использовать Axios – библиотеку для выполнения HTTP-запросов. Возвращаемые данные будут сохраняться в переменных состояния перед использованием компонентом.
Эта задача выполняется в четыре этапа:
- Установка зависимостей.
- Создание переменной состояния для хранения данных.
- Запрос данных.
- Отображение возвращенных данных.
Установка зависимостей
Установите Axios в CodeSandbox с помощью кнопки «Add Dependency», расположенной в левой боковой панели. Импортируйте Axios в компонент App() с помощью приведенной ниже команды:
import axios from 'axios';Создание переменной состояния для хранения данных API
Получаемые из API данные нужно сохранять в переменной состояния, чтобы компонент мог их использовать. Импортируйте привязку useState в компонент с помощью следующей команды:
import React, { useState } from 'react';В компоненте App() создайте переменную состояния с именем books, используя следующий код:
import // ...
function App(){
const [books, setBooks] = . useState(null);
return (
// возвращённый JSX будет тут
)
}Переменная books установлена в null. Метод setBooks инициализирует значения books возвращенными данными.
Запрос данных из API
Чтобы обработать запрос к API, мы используем функцию. Она вызывается, когда нужно сделать запрос.
Создайте функцию fetchData в компоненте App() и используйте Axios для извлечения необходимых данных из API. Сделайте это с помощью следующего кода:
import // ...
function App(){
const [books, setBooks] = . useState(null);
const apiURL = "https://www.anapioficeandfire.com/api/books?pageSize=30";
const fetchData = async () => {
const response = await axios.get(apiURL)
setBooks(response.data)
}
return (
// возвращённый JSX будет тут
)
}Мы создали функцию fetchData, которая отправляет запрос API. Когда запрос завершается, мы используем метод setBooks, чтобы сохранить данные в переменной books.
Отображение возвращенных данных
В методе App() объявите функцию fetchData как обработчик нажатия кнопки «Fetch Data». Используйте обработчик события onClick для вызова функции при каждом нажатии кнопки.
Сделайте это с помощью следующего кода:
import // ...
function App(){
// Переменные компонента
const fetchData = async () => {
const response = await axios.get(apiURL)
setBooks(response.data)
}
return (
<div className="App">
<h1>Game of Thrones Books</h1>
<h2>Fetch a list from an API and display it</h2>
{/_ Запрос данных из API _/}
<div>
<button className="fetch-button" onClick={fetchData}>
Fetch Data
</button>
</div>
{/_ Отображение данных из API _/}
<div className="books">
// Данные из API будут тут
</div>
</div>
)
}Теперь при нажатии кнопки «Fetch Data» вызывается функция fetchData для извлечения данных и их сохранения в переменной состояния.
Используйте метод .map() для перебора объектов в полученном массиве. Сделайте это с помощью следующего кода:
import // ...
function App() {
// здесь идут переменные компонента
return (
<div className="App">
<h1>Game of Thrones Books</h1>
<h2>Fetch a list from an API and display it</h2>
{/_ Запрос данных из API _/}
<div>
// Кнопка для запроса данных
</div>
{/_ Отображение данных из API _/}
<div className="books">
{books &&
books.map((book, index) => {
const cleanedDate = new Date(book.released).toDateString();
const authors = book.authors.join(', ');
return (
<div className="book" key={index}>
<h3>Book {index + 1}</h3>
<h2>{book.name}</h2>
<div className="details">
<p>👨: {authors}</p>
<p>📖: {book.numberOfPages} pages</p>
<p>🏘️: {book.country}</p>
<p>⏰: {cleanedDate}</p>
</div>
</div>
);
})}
</div>
</div>
);
}Мы выводим данные, только если в books содержится какое-либо значение. Перед тем, как отобразить дату, нужно преобразовать её в правильный формат. Если данные об авторе пришли в массиве, то преобразуем его значения в строку, разделенную запятой и пробелом. Таким образом, после нажатия кнопки «Fetch Data» отображается список всех 12 книг Game of Thrones.
Посмотрите, как выглядит итоговая страница. Итоговый код на CodeSandbox.
Заключение
В этой статье мы узнали, как извлекать данные из API и отображать их с помощью React.