Как использовать Axios в React
Axios — клиентская библиотека HTTP, которая позволяет отправлять запросы (реквесты) к заданной конечной точке. Это может быть, например, внешний API сервиса, который размещен на Timeweb Cloud, или ваш внутренний сервер Node.js.
Зачем использовать Axios в React:
- Он предоставляет хорошие настройки по умолчанию для работы с JSON.
- Имена функций соответствуют HTTP. Например, для запроса GET вы используете метод .get().
- Библиотека выдаёт ошибки диапазона 400 и 500. Вам не нужно самостоятельно проверять код состояния и выдавать ошибку.
- Можно использовать как на сервере, так и на клиенте.
Как настроить Axios с помощью React
Если у вас уже есть проект, установите React Axios с помощью npm или любого другого менеджера пакетов:
npm install axiosВ этом руководстве вы будете использовать JSON Placeholder API для получения и изменения сведений о публикации.
Как сделать запрос GET
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-запрос
Следующая задача — научиться создавать ресурсы. Например, администратору сайта нужно добавить новый пост про облачные серверы. Внешне реализация будет стандартной — в интерфейсе отобразится кнопка, при нажатии на которую создаётся публикация. Вам нужно реализовать логику.
Добавить в ресурс новую информацию позволяет 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 Timeweb Cloud."
})
.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 нужен для обновления ресурса.
В этом примере вы обновите первый пост. Для этого вы снова создадите кнопку. Но на этот раз она вызовет функцию для обновления поста:
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: "Hello World!",
body: "This is an updated post."
})
.then((response) => {
setPost(response.data);
});
}
if (!post) return "No post!"
return (
<div>
<h1>{post.title}</h1>
<p>{post.body}</p>
<button onClick={updatePost}>Update Post</button>
</div>
);
}В приведенном выше коде вы применяете метод .put(). Как и в случае с методом .post(), вы указываете свойства, которые должны быть в обновленном ресурсе. Возвращаемые данные добавляются в JSX с помощью .then().
Как сделать запрос DELETE
Наконец, используем Axios, чтобы удалить ресурс. Для этого есть метод 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("Post deleted!");
setPost(null)
});
}
if (!post) return "No post!"
return (
<div>
<h1>{post.title}</h1>
<p>{post.body}</p>
<button onClick={deletePost}>Delete Post</button>
</div>
);
}В большинстве случаев вам не нужны сведения, возвращаемые методом .delete(). Но в приведенном выше коде .then() по-прежнему применяется. Пользователь получает предупреждение о том, что пост успешно удален. Затем данные поста удаляются из состояния. Для них устанавливается начальное значение null.
Как создать экземпляр с помощью Axios
В примерах кода реализован элемент baseURL, который вы используете как часть конечной точки. Каждый раз писать его заново немного утомительно. Решение — создать экземпляр с помощью метода .create(). Axios запомнит baseURL, а также другие значения, которые вы, возможно, захотите указать для каждого реквеста, включая заголовки:
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("Post deleted!");
setPost(null)
});
}
if (!post) return "No post!"
return (
<div>
<h1>{post.title}</h1>
<p>{post.body}</p>
<button onClick={deletePost}>Delete Post</button>
</div>
);
}Одно свойство в объекте конфигурации выше — это baseURL, которому вы передаете конечную точку. Функция .create() возвращает только что созданный экземпляр, который в нашем случае называется client.
В дальнейшем вы можете применять все те же методы, что и раньше, но вам больше не нужно включать baseURL в качестве первого аргумента. Вам просто нужно указать конкретный маршрут, который вы хотите, например, ‘/’, ‘/1’ и так далее. Такой подход помогает создать компактный клиент HTTP.
Как обрабатывать ошибки
Что делать, если при создании запроса возникла ошибка? Например, вы можете передать неправильные данные, обратиться к неправильной конечной точке или получить сетевую ошибку.
Чтобы имитировать ошибку, обратитесь к несуществующей конечной точке API /posts/asdf. В результате должен вернуться код состояния 404:
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(() => {
// invalid url will trigger an 404 error
axios.get(`${baseURL}/asdf`).then((response) => {
setPost(response.data);
}).catch(error => {
setError(error);
});
}, []);
if (error) return `Error: ${error.message}`;
if (!post) return "No post!"
return (
<div>
<h1>{post.title}</h1>
<p>{post.body}</p>
</div>
);
}В этом случае вместо выполнения .then() Axios выдаст ошибку и запустит функцию обратного вызова .catch(). В этой функции мы берём сведения об ошибке и помещаем их в состояние, чтобы предупредить пользователя о проблеме. Когда вы запустите этот пример кода, то увидите текст «Ошибка: запрос не выполнен с кодом состояния 404».
Заключение
Мы рассмотрели несколько операций, которые можно выполнить в React-приложении с помощью Axios. Это лишь основы, но даже на их примере заметны простота и удобство библиотеки.
Больше информации об использовании библиотеки в связке с React смотрите в официальной документации.