Загрузка и отображение данных из 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.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *