Как использовать Axios в React

В этой статье вы узнаете как использовать библиотеку 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.

Если у вас есть вопросы или пожелания, оставляйте их в комментариях. Буду рад ответить.