Использование Axios в React

Axios - это популярная JavaScript-библиотека, предназначенная для упрощения работы с HTTP-запросами. Она была создана для работы как в браузере, так и в среде Node.js.

Основные возможности и преимущества Axios:

1. Простота использования:

• Axios предоставляет более простой и интуитивно понятный API по сравнению с встроенным в JavaScript объектом XMLHttpRequest или fetch.
• Позволяет отправлять асинхронные HTTP-запросы к REST-эндпоинтам и выполнять CRUD-операции.

2. Кроссбраузерность:

• Работает одинаково хорошо в современных браузерах, а также в среде Node.js.
• Автоматически преобразует данные ответа в JSON-формат.

3. Перехват ошибок и их обработка:

• Предоставляет удобные средства для обработки ошибок, включая отслеживание статус-кодов HTTP.
• Позволяет перехватывать и обрабатывать ошибки на уровне приложения.

4. Промисы и async/await:

• Возвращает Promise, что позволяет использовать современные конструкции async/await.
• Упрощает асинхронное программирование.

5. Конфигурирование запросов:

• Предоставляет возможность настройки параметров запроса, заголовков, timeout и других опций.
• Позволяет создавать пользовательские экземпляры Axios с предустановленными конфигурациями.

6. Защита от CSRF:

• Автоматически добавляет токен CSRF (при его наличии) в заголовки запросов.

7. Отмена запросов:

• Поддерживает механизм отмены отправленных запросов.

Перед тем как начать, создадим новый 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 (подробнее про хуки в React читаем по ссылке):

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();

Отвечает за состояние State в компоненте:

 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 (компонент отображения данных).

В State мы добавляем новое свойство loading: false, по нему мы будем определять загрузку данных с сервера.

<DataLoading isLoading={appState.loading} persons={appState.persons} />

Рендерим компонент и передаем пропсы в наш higher-order компонент.

Пример использования Axios:

import axios from 'axios';
// Отправка GET-запроса
axios.get('/api/users')
 .then(response => {
   console.log(response.data);
 })
 .catch(error => {
   console.error(error);
 });
// Отправка POST-запроса с данными
const data = { name: 'John Doe', email: 'john@example.com' };
axios.post('/api/users', data)
 .then(response => {
   console.log(response.data);
 })
 .catch(error => {
   console.error(error);
 });

Таким образом, Axios значительно упрощает работу с HTTP-запросами в JavaScript-приложениях, предоставляя удобный, гибкий и кроссбраузерный API.