Материал подготовлен командой Simple-Server для администраторов VPS и выделенных серверов. Команды и пути проверяйте на тестовой машине перед production.
Как настроить Axios с помощью React
Если у вас уже есть проект, установите React Axios с помощью npm или любого другого менеджера пакетов:
В этом руководстве вы будете использовать JSON Placeholder API для получения и изменения сведений о публикации.
GET позволяет получить данные ресурса.
Например, перед вами стоит задача забрать последнюю публикацию и отобразить её в пользовательском интерфейсе. Читателям нужен заголовок поста и его тело вместе со всеми элементами: текстом, видео, картинками. Всё это позволяет сделать GET.
В качестве практики получим публикации по отдельности и отобразим их в интерфейсе:
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>
);
}Первый шаг —**** добавление Axios в проект. Затем используется хук useEffect. Он включает применение метода .get() для выполнения GET к конечной точке и использование .then() для возвращения ответа.
Ответ возвращается в виде объекта. Сведения представляют собой сообщение со свойствами id, title и body. Они помещаются в часть состояния с именем post, которое отображается в компоненте.
Это базовый пример использования Axios в проекте. Давайте посмотрим и другие популярные методы.
Следующая задача — научиться создавать ресурсы. Например, администратору сайта нужно добавить новый пост про облачные серверы. Внешне реализация будет стандартной — в интерфейсе отобразится кнопка, при нажатии на которую создаётся публикация. Вам нужно реализовать логику.
Добавить в ресурс новую информацию позволяет POST. Он должен быть выполнен на конечной точке /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: "Hello World!",
body: "This is a new post about Simple-Server."
})
.then((response) => {
setPost(response.data);
});
}
if (!post) return "No post!"
return (
<div>
<h1>{post.title}</h1>
<p>{post.body}</p>
<button onClick={createPost}>Create Post</button>
</div>
);
}Это очень похоже на метод .get(), но новый ресурс, который вы хотите создать, предоставляется в качестве второго аргумента после конечной точки API.
Нажатие на кнопку вызывает функцию createPost. Чтобы сделать POST, вы используете метод .post(). В качестве второго аргумента передаётся свойство объекта, которое указывает, каким должен быть новый пост.
Еще раз используйте .then(), чтобы вернуть ответ и заменить первое сообщение, что вы получили, новым сообщением, которое вы запросили.
PUT нужен для обновления ресурса.
В этом примере вы обновите первый пост. Для этого вы снова создадите кнопку. Но на этот раз она вызовет функцию для обновления поста:
В приведенном выше коде вы применяете метод .put(). Как и в случае с методом .post(), вы указываете свойства, которые должны быть в обновленном ресурсе. Возвращаемые данные добавляются в JSX с помощью .then().
Как сделать запрос DELETE
Наконец, используем Axios, чтобы удалить ресурс. Для этого есть метод DELETE.
В качестве примера удалите первый пост. Обратите внимание, что вам не нужен второй аргумент для выполнения этого реквеста:
В большинстве случаев вам не нужны сведения, возвращаемые методом .delete(). Но в приведенном выше коде .then() по-прежнему применяется. Пользователь получает предупреждение о том, что пост успешно удален. Затем данные поста удаляются из состояния. Для них устанавливается начальное значение null.
Как создать экземпляр с помощью Axios
В примерах кода реализован элемент baseURL, который вы используете как часть конечной точки. Каждый раз писать его заново немного утомительно. Решение — создать экземпляр с помощью метода .create(). Axios запомнит baseURL, а также другие значения, которые вы, возможно, захотите указать для каждого реквеста, включая заголовки:
Одно свойство в объекте конфигурации выше — это baseURL, которому вы передаете конечную точку. Функция .create() возвращает только что созданный экземпляр, который в нашем случае называется client.
В дальнейшем вы можете применять все те же методы, что и раньше, но вам больше не нужно включать baseURL в качестве первого аргумента. Вам просто нужно указать конкретный маршрут, который вы хотите, например, ‘/’, ‘/1’ и так далее. Такой подход помогает создать компактный клиент HTTP.
Что делать, если при создании запроса возникла ошибка? Например, вы можете передать неправильные данные, обратиться к неправильной конечной точке или получить сетевую ошибку.
Чтобы имитировать ошибку, обратитесь к несуществующей конечной точке API /posts/asdf. В результате должен вернуться код состояния 404:
В этом случае вместо выполнения .then() Axios выдаст ошибку и запустит функцию обратного вызова .catch(). В этой функции мы берём сведения об ошибке и помещаем их в состояние, чтобы предупредить пользователя о проблеме. Когда вы запустите этот пример кода, то увидите текст «Ошибка: запрос не выполнен с кодом состояния 404».
Мы рассмотрели несколько операций, которые можно выполнить в React-приложении с помощью Axios. Это лишь основы, но даже на их примере заметны простота и удобство библиотеки.
Больше информации об использовании библиотеки в связке с React смотрите в официальной документации.
Нужен сервер для практики? Закажите VPS на Simple-Server — root-доступ, NVMe, DDoS-защита и поддержка 24/7.