Как использовать Axios в React
В этой статье вы узнаете как использовать библиотеку Axios в React.
Рассмотрим все на примере запросов на сервер, отобразим полученные данные в таблице, сдалаем компонент проверки загрузки и все это используя React Hooks.
Что такое Axios?
Axios это один из самых популярных HTTP клиентов для браузеров и node.js, основанный на промисах.
В Axios есть поддержка запросов, получение ответов от сервера, их трансформация и автоматическая конвертация в JSON.
Перед тем как начать, создадим новый React проект:
Данные для проекта
В качестве данных для нашего проекта будем использовать массив объектов:
Настройка компонента для работы с Axios
Загружаем библиотеку Axios:
Импортируем axios в компонент из которого будем отправлять запросы на сервер:
Т.к. в проекте мы используем React Hooks, импортируем useState и useEffect (подробнее про хуки в реакте читаем по ссылке):
Далее в компонент добавляем следующий код:
Рассмотрим код поближе:
Отвечает за состояние стейта в компоненте:
useEffect будет следить за изменением setAppState и производить ререндер если это необходимо
сюда подставляем нашу ссылку
отправляем get запрос на сервер, затем полученные JSON данные сохраняем в стейт
Компонент проверки загрузки
В src создадим папку components. В ней создаем компонент UserData.js и добавляем следующий код:
В пропсы компонента мы будем передавать данные полученные с сервера
делаем проверку, есть ли данные с сервера
Методом map проходим по массиву с людьми, для каждого человека создаем строку. Не забываем про key.
В папке components создаем LoadingPersonsData.js и вставляем следующий код:
Код выше это higher-order component в React. В качестве пропсов он принимает другой компонент и затем возвращает какую-либо логику. В нашем случае компонент проверяет isLoading. Пока данные загружаются, мы отображаем сообщение о загрузке, как только isLoading станет false мы возвращаем компонент с данными.
Внесем изменения в наш App.js для возможности проверки загрузки данных.
Импортируем наши компоненты в App.js:
Добавляем следующий код:
Мы создаем новый компонент, приравниваем его к нашему higher-order компоненту и обворачиваем им UserData (компонент отображения данных).
В стейт мы добавляем новое свойство loading: false, по нему мы будем определять загрузку данных с сервера.
Рендерим компонент и передаем пропсы в наш higher-order компонент.
Добавим немного css и при загрузки данных увидим следующее окно:
А теперь, когда get запрос на сервер завершен успешно, данные получены:
Теперь мы знаем как использовать Axios get с REST API.
Если у вас есть вопросы или пожелания, оставляйте их в комментариях. Буду рад ответить.
Используем Axios в React
Feb 25, 2020 · 7 min read
В этой статье вы узнаете о том, как в React использовать такую удобную библиотеку, как Axios. В ней написано об интеграции Axios, о правильном использовании запросов в жизненных циклах React’а и конечно же о самых популярных типах запросов, вместе с обработчиком ошибок.
👉 Мой Твиттер — там много из мира фронтенда, да и вообще поговорим🖖. Подписывайтесь, будет интересно: ) ✈️
Axios это один из самых попу л ярных HTTP клиентов для браузеров и node.js, основанный на промисах. На момент написания статьи его скачивали около 4 миллионов раз за неделю и это только на NPM.
В Axios есть поддержка запросов, получение ответов от сервера, их трансформация и автоматическая конвертация в JSON. Также в нем есть защита от XSRF.
Перед тем как начать, давайте создадим новый проект в React. Это довольно просто:
После запуска проекта вы увидите стандартную страницу приветствия в React.
Из зависимостей нам понадобятся только Axios и Shards React. Последний мы будем использовать для того, чтобы наши компоненты UI выглядели красиво.
А теперь, откройте проект в своем любимом редакторе и давайте погрузимся в знакомство с Axios.
Интегрируем и настраиваем Axios в проекте на React
С самого начала проект довольно пуст. Мы сейчас же это исправим, создав новую директорию под названием utils. Внутри неё мы также создадим новый файл API.js, в котором будет храниться конфигурация Axios.
Код внутри API.js импортирует Axios и экспортирует уже новую, сконфигурированную версию его же.
Он настроен для использования RandomUser API, как базовый URL и также указывает на то, что мы хотим получить в ответе JSON.
Итак, теперь вы можете создать новый файл User.js и вставить в него следующий компонент. Он будет служить нам шаблоном для карточки пользователя.
Далее, откройте src/App.js и удалите всё, что видите. Нам все равно это больше не понадобится.
Давайте посмотрим как должна выглядеть наша карточка, используя простые данные в пропсах.
Убедитесь, что вы указали URL к картинке в пропсах.
Пока что тут все выглядит отлично, но давайте загрузим “реальные” данные с помощью асинхронного запроса.
В каком методе жизненного цикла компонента мы должны делать запрос?
Опираясь на официальную документацию React, это идеальное место для такого рода действий в этой библиотеке.
Превосходно! Теперь мы знаем откуда нам делать запрос данных, давайте теперь сделаем первый GET запрос. Но сначала нам надо немного обновить компонент App.js, чтобы мы могли внедрить в него возможность делать запросы.
GET запросы
Теперь App.js имеет собственный стейт. Это поможет нам в отслеживании статуса загрузки, а также имени пользователя, его аватаре и электронной почте. Также мы будем использовать данные стейта во время ререндеринга компонента.
Также мы создали async componentDidMount() метод. Внутри него мы сделали асинхронный запрос на загрузку данных и обновление стейта. Это вызовет новый процесс ререндеринга.
Обратите внимание, что этот метод async и позволяет нам делать действия с await внутри функции.
Что-то многовато кода, давайте разберемся со всем поочередно:
Внутри async componentDidMount() мы делаем асинхронный GET запрос. Мы делаем его на базовый URL (обратите внимание на / ). Также мы отправляем два параметра, указывая количество нужных нам результатов и какие данные о пользователе мы ожидаем получить. В нашем случае это имя, email и аватар.
Обрабатываем ошибки с Async/Await
Вот пример того, как был бы переписан запрос с использованием try/catch. Запрос тут также прикреплен и он выдаст ошибку.
Тадаааам и мы получаем ошибку в консоль.
Блок catch это идеальное место для парсинга ошибок. Также это идеальное место, чтобы показывать вашим пользователям подходящее сообщение.
POST запросы
А вот как будет выглядеть запрос POST:
И ответ покажет нам, что данные были успешно отправлены.
PATCH запросы
Вот как он будет выглядеть:
И данные успешно обновляться при завершении запроса:
DELETE запросы
А вот работающий код:
Тадааам и данные успешно удалены с сервера:
Заключение
Работу с запросами в React при помощи Axios ну очень легко понять. Тут есть много моментов для улучшения, например добавление абстракций и структуры, но всё это уже в другой раз.
Как использовать Axios в React
В этой статье вы узнаете как использовать библиотеку Axios в React.
Рассмотрим все на примере запросов на сервер, отобразим полученные данные в таблице, сдалаем компонент проверки загрузки и все это используя React Hooks.
Что такое Axios?
Axios это один из самых популярных HTTP клиентов для браузеров и node.js, основанный на промисах.
В Axios есть поддержка запросов, получение ответов от сервера, их трансформация и автоматическая конвертация в JSON.
Перед тем как начать, создадим новый React проект:
Данные для проекта
В качестве данных для нашего проекта будем использовать массив объектов:
Настройка компонента для работы с Axios
Загружаем библиотеку Axios:
Импортируем axios в компонент из которого будем отправлять запросы на сервер:
Т.к. в проекте мы используем React Hooks, импортируем useState и useEffect (подробнее про хуки в реакте читаем по ссылке):
Далее в компонент добавляем следующий код:
Рассмотрим код поближе:
Отвечает за состояние стейта в компоненте:
useEffect будет следить за изменением setAppState и производить ререндер если это необходимо
сюда подставляем нашу ссылку
отправляем get запрос на сервер, затем полученные JSON данные сохраняем в стейт
Компонент проверки загрузки
В src создадим папку components. В ней создаем компонент UserData.js и добавляем следующий код:
В пропсы компонента мы будем передавать данные полученные с сервера
делаем проверку, есть ли данные с сервера
Методом map проходим по массиву с людьми, для каждого человека создаем строку. Не забываем про key.
В папке components создаем LoadingPersonsData.js и вставляем следующий код:
Код выше это higher-order component в React. В качестве пропсов он принимает другой компонент и затем возвращает какую-либо логику. В нашем случае компонент проверяет isLoading. Пока данные загружаются, мы отображаем сообщение о загрузке, как только isLoading станет false мы возвращаем компонент с данными.
Внесем изменения в наш App.js для возможности проверки загрузки данных.
Импортируем наши компоненты в App.js:
Добавляем следующий код:
Мы создаем новый компонент, приравниваем его к нашему higher-order компоненту и обворачиваем им UserData (компонент отображения данных).
В стейт мы добавляем новое свойство loading: false, по нему мы будем определять загрузку данных с сервера.
Рендерим компонент и передаем пропсы в наш higher-order компонент.
Добавим немного css и при загрузки данных увидим следующее окно:
А теперь, когда get запрос на сервер завершен успешно, данные получены:
Теперь мы знаем как использовать Axios get с REST API.
Если у вас есть вопросы или пожелания, оставляйте их в комментариях. Буду рад ответить.
React: простое и эффективное решение для управления состоянием приложений
Немного забегая вперед, скажу, что решение получилось чуть менее производительным, чем «классическое» сочетание хука useReducer() и инструментов, предоставляемых Context API (которые, собственно, и составляют ядро решения).
Решение не является законченным и находится в стадии активной разработки, поэтому приветствуются любые замечания и предложения, любая конструктивная критика.
Пока мне не представилось возможности испытать решение в «полевых условиях» (я намерен сделать это при первом удобном случае), но кажется, что оно подойдет для разработки приложений любой сложности при соблюдении двух важных условий:
Исходный код проекта находится здесь.
Результат
Давайте начнем с того, что мы хотим получить на выходе. И почему не воспользоваться готовыми решениями? Другими словами, зачем нам изобретать велосипед, когда, казалось бы, все давно придумано умными людьми?
Объясню простыми… кодом. Предположим, что мы хотим разработать «тудушку» со следующим функционалом:
Если переписать функционал тудушки, используя сочетание useReducer() и Context API (а также парочки «хаков»), код получится примерно таким:
Намного лучше как с точки зрения читаемости кода, так и, что особенно важно, с точки зрения производительности. Но константы! В принципе, без них можно обойтись. Но редуктор! Кажется, что без редуктора обойтись нельзя. Или все-таки можно? Вполне. А что насчет диспетчера? Можно ли обойтись без него? Нет, без диспетчера обойтись не получится, потому что управлять состоянием React-приложения можно только через него. Но его, как мы увидим дальше, совсем не обязательно использовать в явном виде.
Если переписать функционал тудушки с помощью решения, которое мы еще не рассматривали, но скоро рассмотрим, то код хранилища получится следующим:
Если «разнести» сеттеры, геттеры и экшены по отдельным файлам, то код хранилища получится таким:
То, что доктор прописал. Теперь давайте обо всем по порядку.
Концепция
Давайте рассуждать вслух.
Структура хранилища по возможности должна оставаться плоской, т.е. одноуровневой: это сильно упростит логику обновления состояния.
Далее, нам нужны операции для изменения состояния. Состояние может меняться синхронно и асинхронно, поэтому имеет смысл дифференцировать операции соответствующим образом. Назовем синхронные операции сеттерами ( setters ), а асинхронные — экшенами ( actions ).
Какую сигнатуру должны иметь сеттеры и экшены?
Очевидно, что сеттеры должны принимать какие-то параметры и иметь прямой доступ к состоянию для его изменения. Возвращать сеттеры должны модифицированное состояние в виде части глобального состояния, т.е. объект с ключом, соответствующим определенной части глобального состояния. Я пока не нашел более простого способа для корректной идентификации части модифицируемого сеттером состояния. Схематично это можно представить следующим образом:
Или, когда сеттер не использует состояние:
Или, когда название аргумента совпадает с названием части глобального состояния (ключом объекта состояния):
Экшены также могут принимать любое количество параметров, но не имеют прямого доступа к состоянию. Доступ экшенов к состоянию опосредован сеттерами, т.е. экшены меняют состояние только через сеттеры. Экшены не должны ничего возвращать. Сигнатура:
Геттеры могут принимать любое количество параметров и имеют прямой доступ к состоянию. Поскольку цель геттеров — даже не столько извлечение части состояния (потому что мы можем делать это напрямую из состояния, содержащегося в контексте), сколько вычисление производных данных, имеет смысл передавать геттерам состояние в распакованном виде, т.е. в виде отдельных частей. Также, поскольку геттеры могут использоваться для производства сложных вычислений, имеет смысл передавать им другие геттеры ( DRY ). Возвращать геттеры должны часть состояния или производные данные. Сигнатура:
Обратите внимание: геттеры не должны модифицировать состояние.
Теперь поговорим о том, как добиться правильной сигнатуры операций.
Реализация
Ремарка: функция unpackModule() — это простая утилита для преобразования модуля в объект, которая выглядит так:
Если сеттеры, например, импортируются как обычный объект, то у нас нет необходимости прибегать к помощи unpackModule() :
Если мы импортируем сеттеры по отдельности, их необходимо распаковать:
Обратите внимание: порядок вызова утилит имеет принципиальное значение. createActions() должны передаваться декорированные сеттеры.
Теперь рассмотрим createGetters() :
Самое интересное происходит в функции createSetters() :
Здесь мы также модифицируем сеттеры, но не просто передаем им состояние в качестве первого аргумента, а вычисляем новую часть состояния на основе (гарантированно) свежего состояния, которое при вызове получает колбек setState() :
Вот почему так важно, чтобы сеттер возвращал объект с ключом (или несколькими ключами), соответствующими ключам объекта состояния. Значения совпадающих ключей (части состояния) перезаписываются новыми значениями.
Вот и все. Для доступа к состоянию и операциям необходимо обернуть компоненты в провайдер контекста и вызвать хук useSimpleContext() в нужном компоненте:
Так что, как видите, мы вовсе не изобретали велосипед заново, а всего лишь сделали его немного лучше. Как я отмечал в начале статьи, ездить велосипед после этого стал немного медленнее (поскольку слегка потяжелел), но это только при разгоне. Зато выглядеть велосипед стал круче, да и «апгрейдить» его стало легче 😃
Пожалуй, это все, чем я хотел поделиться с вами в данной статье. Буду рад любой форме обратной связи.
Использование Axios с React
Published on November 12, 2020
Введение
Axios основан на промисах, что дает вам возможность использовать возможности JavaScript async и await для получения более удобочитаемого асинхронного кода.
Вы можете перехватывать и отменять запросы, также в клиенте имеется встроенная защита от подделки запросов между сайтами.
В этой статье вы увидите примеры использования Axios для доступа к популярному JSON Placeholder API из приложения React.
Предварительные требования
Чтобы следовать за примерами этой статьи, вам потребуется следующее:
Шаг 1 — Добавление Axios в проект
Чтобы добавить Axios в проект, откройте терминал и поменяйте каталоги в вашем проекте:
Затем запустите эту команду для установки Axios:
Далее вам потребуется импортировать Axios в файл, где вы захотите его использовать.
Шаг 2 — Создание запроса GET
Создайте в папке src вашего проекта React новый компонент с именем PersonList.js :
Добавьте в компонент следующий код:
Шаг 3 — Составление запроса POST
Удалите предыдущий код в PersonList и добавьте следующий код, чтобы создать форму для ввода данных пользователя и последующей отправки контента в API методом POST :
Шаг 4 — Создание запроса DELETE
В этом примере вы видите, как удалять элементы из API, используя axios.delete и передавая URL как параметр.
В этом случае объект res предоставляет информацию о запросе. Затем вы можете снова использовать console.log для этой информации после отправки формы.
Шаг 5 — Использование базового экземпляра в Axios
В этом примере вы видите, как можно создать базовый экземпляр, в котором вы можете задать определение URL-адреса и любых других элементов конфигурации.
Создайте отдельный файл с именем api.js :
Экспортируйте новый экземпляр axios со следующими значениями по умолчанию:
Поскольку http://jsonplaceholder.typicode.com/ теперь является базовым URL, вам больше не потребуется вводить URL полностью каждый раз, когда вы захотите использовать другую конечную точку API.
Шаг 6 — Использование async и await
В этом примере вы видите, как использовать async и await для работы с промисами.
Заключение
В этом учебном модуле мы изучили несколько примеров использования Axios в приложении React для создания запросов HTTP и ответов обработки.
