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

В этой статье мы рассмотрим, что такое Axios и как вы можете использовать его в React.

Axios – что это
Функции Axios
Как добавить Axios в проект React
- Шаг 1. Выбор сервера
- Шаг 2. Добавление Axios в React
Как настроить Axios с помощью React
Как создать базовый экземпляр с помощью Axios
Как обработать ошибки

Axios – что это

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

Axios предоставляет API для создания и отправки HTTP-запросов, обработки ответов и управления запросами.

Функции Axios

Поддержка множества платформ. Axios используют как в браузере, так и в среде Node.js. Это позволяет выполнять HTTP-запросы как на клиентской стороне (например, в браузере), так и на серверной стороне (например, при создании сервера).
Поддержка промисов. Axios возвращает объекты Promise, что делает управление асинхронными запросами удобным. Благодаря этому можно использовать синтаксис async/await для управления асинхронным кодом.
Обработка запросов и ответов. Axios предоставляет множество встроенных функций для обработки запросов и ответов – например, интерцепторы, которые позволяют вам модифицировать запросы и ответы перед отправкой или после получения.
Поддержка отмены запросов. Axios позволяет отменять запросы, что может быть полезно, если пользователь внезапно переходит на другую страницу или прерывает запрос.
Установка заголовков. Вы можете устанавливать HTTP-заголовки (Content-Type или Authorization). Так вы сможете отправлять запросы с необходимой конфигурацией.
Манипуляции с данными. Axios предоставляет возможность отправлять данные в различных форматах: JSON, формы, текст и другие.
Обработка ошибок. С Axios можно легко обрабатывать различные виды ошибок, которые возникают во время отправки запросов или получения ответов.

Как добавить Axios в проект React

Шаг 1. Выбор сервера

Ищете надежное и гибкое решение для хранения данных? SpaceWeb предлагает аренду выделенного сервера, который будет адаптирован под ваши уникальные задачи. Наши серверы находятся в дата-центрах на территории России, обеспечивая отказоустойчивость и высокую доступность.

С нами вы получите root-доступ, возможность создать сервер по вашим требованиям, а также круглосуточную техническую поддержку. SpaceWeb — это более 20 лет опыта и оптимальные цены.

Доверьтесь нам, и мы поможем вам выбрать и настроить идеальное решение для ваших потребностей.

Примеры различных выделенных серверов SpaceWeb

Шаг 2. Добавление Axios в React

Для добавления Axios в ваш React-проект вы можете воспользоваться менеджером пакетов npm или Yarn.

npm:

Откройте терминал и перейдите в каталог вашего проекта:

cd [путь/к/вашему/проекту]

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

npm install axios

Yarn:

Откройте терминал и перейдите в каталог вашего проекта:

cd [путь/к/вашему/проекту]

Для установки Axios выполните команду:

yarn add axios

Когда установка завершится, Axios c React станет доступен в вашем проекте.

Как настроить Axios с помощью React

Как сделать запрос GET

GET-запрос используется для получения информации с сервера. Он инициирует запрос к указанному ресурсу и получает данные, которые находятся на этом ресурсе.

Особенность GET-запросов – это возможность их кеширования и сохранения в истории браузера. Однако из-за ограничений на максимальную длину URL, они могут быть неэффективными для передачи больших объемов данных.

Давайте выполним запрос для получения данных о конкретных постах. Если посмотреть на конечную точку (endpoint), то вы запрашиваете первый пост из конечной точки `/posts`:

import axios from "axios";
import React from "react";

const baseURL = "https://jsonplaceholder.typicode.com/posts/1";

export default function App() {
const [post, setPost] = React.useState(null);

React.useEffect(() => {
axios.get(baseURL).then((response) => {
setPost(response.data);
});
}, []);

if (!post) return null;

return (
<div>
<h1>{post.title}</h1>
<p>{post.body}</p>
</div>
);
}

Для выполнения этого запроса:

При монтировании компонента используется хук `useEffect`.
Происходит импорт библиотеки Axios, использование метода GET.
Используется колбека `.then()`, чтобы получить все данные из ответа.

Ответ возвращается в виде объекта. Данные (в нашем случае пост со свойствами id, title и body) помещаются в состояние `post`, которое затем отображается в компоненте.

Как сделать запрос POST

POST-запрос используется для отправки данных на сервер. Он предназначен для создания новых ресурсов или выполнения каких-либо других действий на сервере, которые изменяют его состояние.

Согласно API, он должен выполняться в конечной точке `/posts`. Если посмотреть на код ниже, вы увидите, что там есть кнопка для создания нового поста:

import axios from "axios";
import React from "react";

const baseURL = "https://jsonplaceholder.typicode.com/posts";

export default function App() {
const [post, setPost] = React.useState(null);

React.useEffect(() => {
axios.get(`${baseURL}/1`).then((response) => {
setPost(response.data);
});
}, []);

function createPost() {
axios
.post(baseURL, {
title: "Привет!",
body: "Это новый пост."
})
.then((response) => {
setPost(response.data);
});
}

if (!post) return "Нет поста!"

return (
<div>
<h1>{post.title}</h1>
<p>{post.body}</p>
<button onClick={createPost}>Создать пост</button>
</div>
);
}

Когда вы нажимаете на кнопку, вызывается функция `createPost`.

Для выполнения POST-запроса с помощью Axios:

Используется метод `.post()`.
Вторым аргументом передается объект, который определяет, каким должен быть новый пост.
Снова используется колбек `.then()`, чтобы получить данные ответа и заменить первый полученный пост новым постом, который был запрошен.

Процесс очень похож на аналогичный с GET, но новый ресурс, который вы хотите создать, указывается вторым аргументом после конечной точки API.

Как сделать запрос PUT

PUT-запрос – это один из методов HTTP-протокола, который используется для обновления существующего ресурса на сервере.

Этот метод позволяет клиенту отправить данные на сервер, чтобы обновить или заменить информацию о существующем ресурсе согласно указанной конечной точке (URL). PUT-запрос изменяет состояние сервера на основе предоставленных данных и URL.

Для выполнения PUT-запроса и обновления существующего ресурса используется метод PUT.

Пример:

import axios from "axios";
import React from "react";

const baseURL = "https://jsonplaceholder.typicode.com/posts";

export default function App() {
const [post, setPost] = React.useState(null);

React.useEffect(() => {
axios.get(`${baseURL}/1`).then((response) => {
setPost(response.data);
});
}, []);

function updatePost() {
axios
.put(`${baseURL}/1`, {
title: "Привет!",
body: "Это обновленный пост."
})
.then((response) => {
setPost(response.data);
});
}

if (!post) return "Нет поста!"

return (
<div>
<h1>{post.title}</h1>
<p>{post.body}</p>
<button onClick={updatePost}>Обновить пост</button>
</div>
);
}

В этом коде:

Используется метод PUT из библиотеки Axios. Аналогично POST включаются свойства, которые вы хотите обновить в существующем ресурсе. В данном случае обновляется пост с id равным 1, как указано в строке `axios.put(`${baseURL}/1`, { ... })`.
Затем с использованием колбека `.then()`, JSX компонента пополняется новыми данными, которые возвращаются в ответе на PUT-запрос.

Таким образом, PUT-запрос используется для обновления существующего ресурса на сервере. Он отправляет данные на сервер, которые заменяют данные уже существующего ресурса.

Как сделать запрос DELETE

DELETE-запрос используется для удаления ресурса с сервера. Этот метод позволяет клиенту отправить запрос на сервер с указанием ресурса, который требуется удалить.

В качестве примера давайте рассмотрим удаление первого поста.

Важно! Обратите внимание, что для выполнения этого запроса вам не нужно никаких данных второго аргумента.

import axios from "axios";
import React from "react";

const baseURL = "https://jsonplaceholder.typicode.com/posts";

export default function App() {
const [post, setPost] = React.useState(null);

React.useEffect(() => {
axios.get(`${baseURL}/1`).then((response) => {
setPost(response.data);
});
}, []);

function deletePost() {
axios
.delete(`${baseURL}/1`)
.then(() => {
alert("Пост удален!");
setPost(null);
});
}

if (!post) return "Нет поста!"

return (
<div>
<h1>{post.title}</h1>
<p>{post.body}</p>
<button onClick={deletePost}>Удалить пост</button>
</div>
);
}

После выполнения этого запроса пользователь получит оповещение о том, что пост был удален и его больше нет. Затем данные поста очищаются и устанавливается их исходное значение – `null`.

Как создать базовый экземпляр с помощью Axios

В предыдущих примерах видно, что существует базовый URL, который вы используете в качестве части конечной точки для запросов Axios – «https://jsonplaceholder.typicode.com/posts».

Однако становится немного утомительно писать этот базовый URL для каждого запроса. Вы можете сделать так, чтобы Axios запомнил, какой базовый URL вы используете.

Если создать экземпляр с помощью метода `.create()`, Axios будет помнить этот базовый URL, а также другие значения, которые вы можете указать для каждого запроса:

import axios from "axios";
import React from "react";

const client = axios.create({
baseURL: "https://jsonplaceholder.typicode.com/posts"
});

export default function App() {
const [post, setPost] = React.useState(null);

React.useEffect(() => {
client.get("/1").then((response) => {
setPost(response.data);
});
}, []);

function deletePost() {
client
.delete("/1")
.then(() => {
alert("Пост удален!");
setPost(null)
});
}

if (!post) return "Нет поста!"

return (
<div>
<h1>{post.title}</h1>
<p>{post.body}</p>
<button onClick={deletePost}>Удалить пост</button>
</div>
);
}

В будущем вы можете использовать все те же методы, что и раньше, но вам больше не нужно включать `baseURL` в качестве первого аргумента. Это упростит и улучшит читаемость вашего кода.

Как обработать ошибки

Что делать, если при выполнении запроса возникает ошибка? Например, при передаче неверных данных, запросе несуществующей конечной точки или ошибке сети, пропишите:

import axios from "axios";
import React from "react";

const baseURL = "https://jsonplaceholder.typicode.com/posts";

export default function App() {
const [post, setPost] = React.useState(null);
const [error, setError] = React.useState(null);

React.useEffect(() => {
// Неверный URL вызовет ошибку 404
axios.get(`${baseURL}/asdf`).then((response) => {
setPost(response.data);
}).catch(error => {
setError(error);
});
}, []);

if (error) return `Ошибка: ${Сообщение об ошибке.}`;
if (!post) return "Нет поста!"

return (
<div>
<h1>{post.title}</h1>
<p>{post.body}</p>
</div>
);
}

В этом случае, вместо выполнения колбека `.then()`, Axios вызовет ошибку и выполнит функцию `.catch()`.

Таким образом, данные об ошибке используются для информирования пользователей об ошибке. При выполнении этого кода вы увидите текст «Error: Request failed with status code 404» («Ошибка: Запрос завершился с кодом состояния 404»).

Пред.

След.

« Балансировщик нагрузки (Load Balancer)

Как подключить Node.js к базе данных MongoDB »