Axios — клиентская библиотека HTTP, которая позволяет отправлять запросы (реквесты) к заданной конечной точке. Это может быть, например, внешний API сервиса, который размещен на Timeweb Cloud, или ваш внутренний сервер Node.js.
Зачем использовать Axios в React:
- Он предоставляет хорошие настройки по умолчанию для работы с JSON.
- Имена функций соответствуют HTTP. Например, для запроса GET вы используете метод .get().
- Библиотека выдаёт ошибки диапазона 400 и 500. Вам не нужно самостоятельно проверять код состояния и выдавать ошибку.
- Можно использовать как на сервере, так и на клиенте.
Как настроить Axios с помощью React
Если у вас уже есть проект, установите React Axios с помощью npm или любого другого менеджера пакетов:
В этом руководстве вы будете использовать JSON Placeholder API для получения и изменения сведений о публикации.
Как сделать запрос GET
GET позволяет получить данные ресурса.
Например, перед вами стоит задача забрать последнюю публикацию и отобразить её в пользовательском интерфейсе. Читателям нужен заголовок поста и его тело вместе со всеми элементами: текстом, видео, картинками. Всё это позволяет сделать GET.
В качестве практики получим публикации по отдельности и отобразим их в интерфейсе:
Первый шаг — добавление Axios в проект. Затем используется хук useEffect. Он включает применение метода .get() для выполнения GET к конечной точке и использование .then() для возвращения ответа.
Ответ возвращается в виде объекта. Сведения представляют собой сообщение со свойствами id, title и body. Они помещаются в часть состояния с именем post, которое отображается в компоненте.
Это базовый пример использования Axios в проекте. Давайте посмотрим и другие популярные методы.
Как сделать POST-запрос
Следующая задача — научиться создавать ресурсы. Например, администратору сайта нужно добавить новый пост про облачные серверы. Внешне реализация будет стандартной — в интерфейсе отобразится кнопка, при нажатии на которую создаётся публикация. Вам нужно реализовать логику.
Добавить в ресурс новую информацию позволяет POST. Он должен быть выполнен на конечной точке /posts. В примере кода также появилась кнопка для создания сообщения:
Это очень похоже на метод .get(), но новый ресурс, который вы хотите создать, предоставляется в качестве второго аргумента после конечной точки API.
Нажатие на кнопку вызывает функцию createPost. Чтобы сделать POST, вы используете метод .post(). В качестве второго аргумента передаётся свойство объекта, которое указывает, каким должен быть новый пост.
Еще раз используйте .then(), чтобы вернуть ответ и заменить первое сообщение, что вы получили, новым сообщением, которое вы запросили.
Как сделать запрос PUT
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 смотрите в официальной документации.
