В этой статье вы узнаете как использовать библиотеку Axios в React.
Рассмотрим все на примере запросов на сервер, отобразим полученные данные в таблице, сдалаем компонент проверки загрузки и все это используя React Hooks.
Что такое Axios?
Axios это один из самых популярных HTTP клиентов для браузеров и node.js, основанный на промисах.
В Axios есть поддержка запросов, получение ответов от сервера, их трансформация и автоматическая конвертация в JSON.
Перед тем как начать, создадим новый React проект:
npx create-react-app react-axios-table
Зайдем в него:
cd react-axios-table
Данные для проекта
В качестве данных для нашего проекта будем использовать массив объектов:
[{id: 101,firstName: 'Sue',lastName: 'Corson',email: 'DWhalley@in.gov',phone: '(612)211-6296',address: {streetAddress: '9792 Mattis Ct',city: 'Waukesha',state: 'WI',zip: '22178'},description: 'et lacus magna dolor...',}]
Ссылка на данные
Настройка компонента для работы с Axios
Загружаем библиотеку Axios:
npm i axios
Импортируем axios в компонент из которого будем отправлять запросы на сервер:
import axios from 'axios'
Т.к. в проекте мы используем React Hooks, импортируем useState и useEffect (подробнее про хуки в реакте читаем по ссылке):
import React, { useEffect, useState } from 'react';
Далее в компонент добавляем следующий код:
function App() { const [appState, setAppState] = useState(); useEffect(() => { const apiUrl = 'http://www.filltext.com/?rows=32&id={number|1000}&firstName={firstName}&lastName={lastName}&email={email}&phone={phone|(xxx)xxx-xx-xx}&address={addressObject}&description={lorem|32}'; axios.get(apiUrl).then((resp) => { const allPersons = resp.data; setAppState(allPersons); }); }, [setAppState]); return ( <div className="app"> </div> );}export default App;
Рассмотрим код поближе:
const [appState, setAppState] = useState();
Отвечает за состояние стейта в компоненте:
useEffect(() => {}, [setAppState])
useEffect будет следить за изменением setAppState и производить ререндер если это необходимо
const apiUrl=''
сюда подставляем нашу ссылку
axios.get(apiUrl).then((resp) => { const allPersons = resp.data; setAppState(allPersons); });
отправляем get запрос на сервер, затем полученные JSON данные сохраняем в стейт
Компонент проверки загрузки
В src создадим папку components. В ней создаем компонент UserData.js и добавляем следующий код:
function UserData(props) { const { persons } = props if (!persons || persons.length === 0) return <p>Нет данных.</p> return ( <div> <table> <thead> <tr> <th>id</th> <th>firstName</th> <th>lastName</th> <th>email</th> <th>phone</th> </tr> </thead> <tbody> { persons.map((person) => <tr key={person.id}> <td>{person.id}</td> <td>{person.firstName}</td> <td>{person.lastName}</td> <td>{person.email}</td> <td>{person.phone}</td> </tr> ) } </tbody> </table> </div> )}export default UserData
В пропсы компонента мы будем передавать данные полученные с сервера
if (!persons || persons.length === 0) return <p>Нет данных.</p>
делаем проверку, есть ли данные с сервера
{ persons.map((person) => <tr key={person.id}> <td>{person.id}</td> <td>{person.firstName}</td> <td>{person.lastName}</td> <td>{person.email}</td> <td>{person.phone}</td> </tr> ) }
Методом map проходим по массиву с людьми, для каждого человека создаем строку. Не забываем про key.
В папке components создаем LoadingPersonsData.js и вставляем следующий код:
function OnLoadingUserData(Component) { return function LoadingPersonsData({ isLoading, ...props }) { if (!isLoading) return <Component {...props} /> else return ( <div> <h1>Подождите, данные загружаются!</h1> </div> ) }}export default LoadingPersonsData
Код выше это higher-order component в React. В качестве пропсов он принимает другой компонент и затем возвращает какую-либо логику. В нашем случае компонент проверяет isLoading. Пока данные загружаются, мы отображаем сообщение о загрузке, как только isLoading станет false мы возвращаем компонент с данными.
Внесем изменения в наш App.js для возможности проверки загрузки данных.
Импортируем наши компоненты в App.js:
import UserData from './components/UserData'import OnLoadingUserData from './components/OnLoadingUserData'
Добавляем следующий код:
function App() { const DataLoading = LoadingPersonsData(UserData); const [appState, setAppState] = useState( { loading: false, persons: null, } ) useEffect(() => { setAppState({loading: true}) const apiUrl = 'http://www.filltext.com/?rows=32&id={number|1000}&firstName={firstName}&lastName={lastName}&email={email}&phone={phone|(xxx)xxx-xx-xx}&address={addressObject}&description={lorem|32}'; axios.get(apiUrl).then((resp) => { const allPersons = resp.data; setAppState({ loading: false, persons: allPersons }); }); }, [setAppState]); return ( <div className="app"> <DataLoading isLoading={appState.loading} persons={appState.persons} /> </div> );}export default App;
const DataLoading = LoadingPersonsData(UserData);
Мы создаем новый компонент, приравниваем его к нашему higher-order компоненту и обворачиваем им UserData (компонент отображения данных).
В стейт мы добавляем новое свойство loading: false, по нему мы будем определять загрузку данных с сервера.
<DataLoading isLoading={appState.loading} persons={appState.persons} />
Рендерим компонент и передаем пропсы в наш higher-order компонент.
Добавим немного css и при загрузки данных увидим следующее окно:
А теперь, когда get запрос на сервер завершен успешно, данные получены:
Теперь мы знаем как использовать Axios get с REST API.
Если у вас есть вопросы или пожелания, оставляйте их в комментариях. Буду рад ответить.
