[JavaScript, Программирование, ReactJS] Как использовать Axios в React

Ответить на тему

Автор

Сообщение

news_bot ^®

Стаж: 6 лет 4 месяца
Сообщений: 27286

news_bot ^® написал(а)
03-Окт-2020 22:32

Цитировать

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

Далее в компонент добавляем следующий код:

Рассмотрим код поближе:

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'

Добавляем следующий код:

const DataLoading = LoadingPersonsData(UserData);

Мы создаем новый компонент, приравниваем его к нашему higher-order компоненту и обворачиваем им UserData (компонент отображения данных).
В стейт мы добавляем новое свойство loading: false, по нему мы будем определять загрузку данных с сервера.

Рендерим компонент и передаем пропсы в наш higher-order компонент.
Добавим немного css и при загрузки данных увидим следующее окно:

А теперь, когда get запрос на сервер завершен успешно, данные получены:

Теперь мы знаем как использовать Axios get с REST API.
Если у вас есть вопросы или пожелания, оставляйте их в комментариях. Буду рад ответить.
===========
Источник:
habr.com
===========
Похожие новости:

Теги для поиска: #_javascript, #_programmirovanie (Программирование), #_reactjs, #_javascript, #_react, #_frontend, #_axios, #_ajax, #_programmirovanie (программирование), #_tutorials, #_javascript, #_programmirovanie (
Программирование
), #_reactjs

Профиль ЛС

Ответить на тему

Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы

Текущее время: 04-Июл 23:47
Часовой пояс: UTC + 5