Как использовать 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.
Если у вас есть вопросы или пожелания, оставляйте их в комментариях. Буду рад ответить.
How To Use Axios With React: The Definitive Guide (2021)
In this guide, you will see exactly how to use Axios.js with React using tons of real-world examples featuring React hooks.
You’ll see why you should use Axios as a data fetching library, how to set it up with React, and perform every type of HTTP request with it.
Then we’ll touch on more advanced features like creating an Axios instance for reusability, using async-await with Axios for simplicity, and how to use Axios as a custom hook.
Let’s dive right in!
Want Your Own Copy? 📄
It includes all of the essential information here as a convenient PDF guide.
Table of Contents
What is Axios?
Axios is an HTTP client library that allows you to make requests to a given endpoint:
This could be an external API or your own backend Node.js server, for example.
By making a request, you expect your API to perform an operation according to the request you made.
For example, if you make a GET request, you expect to get back data to display in your application.
Why Use Axios in React
There are a number of different libraries you can use to make these requests, so why choose Axios?
Here are five reasons why you should use Axios as your client to make HTTP requests:
How to Set Up Axios with React
Using Axios with React is a very simple process. You need three things:
The quickest way to create a new React application is by going to react.new.
If you have an existing React project, you just need to install Axios with npm (or any other package manager):
In this guide, you’ll use the JSON Placeholder API to get and change post data.
Here is a list of all the different routes you can make requests to, along with the appropriate HTTP method for each:
Here is a quick example of all of the operations you’ll be performing with Axios and your API endpoint — retrieving, creating, updating, and deleting posts:
How to Make a GET Request
To fetch data or retrieve it, make a GET request.
First, you’re going to make a request for individual posts. If you look at the endpoint, you are getting the first post from the /posts endpoint:
How to Make a POST Request
To create new data, make a POST request.
According to the API, this needs to be performed on the /posts endpoint. If you look at the code below, you’ll see that there’s a button to create a post:
When you click on the button, it calls the createPost function.
How to Make a PUT Request
To update a given resource, make a PUT request.
In this case, you’ll update the first post.
To do so, you’ll once again create a button. But this time, the button will call a function to update a post:
In the code above, you use the PUT method from Axios. And like with the POST method, you include the properties that you want to be in the updated resource.
How to Make a DELETE Request
Finally, to delete a resource, use the DELETE method.
As an example, we’ll delete the first post.
Note that you do not need a second argument whatsoever to perform this request:
Also, once a post is deleted, the text «No post» is shown immediately after the alert message.
How to Handle Errors with Axios
What about handling errors with Axios?
What if there’s an error while making a request? For example, you might pass along the wrong data, make a request to the wrong endpoint, or have a network error.
This request will return a 404 status code:
In this function, we are taking the error data and putting it in state to alert our user about the error. So if we have an error, we will display that error message.
In this function, the error data is put in state and used to alert users about the error. So if there’s an error, an error message is displayed.
When you run this code code, you’ll see the text, «Error: Request failed with status code 404».
How to Create an Axios Instance
If you look at the previous examples, you’ll see that there’s a baseURL that you use as part of the endpoint for Axios to perform these requests.
However, it gets a bit tedious to keep writing that baseURL for every single request. Couldn’t you just have Axios remember what baseURL you’re using, since it always involves a similar endpoint?
How to Use the Async-Await Syntax with Axios
A big benefit to using promises in JavaScript (including React applications) is the async-await syntax.
Async-await allows you to write much cleaner code without then and catch callback functions. Plus, code with async-await looks a lot like synchronous code, and is easier to understand.
But how do you use the async-await syntax with Axios?
In the example below, posts are fetched and there’s still a button to delete that post:
Note that the getPost function is called immediately after being created.
As you can see, async-await cleans up the code a great deal, and you can use it with Axios very easily.
How to Create a Custom useAxios Hook
Async-await is a great way to simplify your code, but you can take this a step further.
Instead of using useEffect to fetch data when the component mounts, you could create your own custom hook with Axios to perform the same operation as a reusable function.
While you can make this custom hook yourself, there’s a very good library that gives you a custom useAxios hook called use-axios-client.
First, install the package:
To use the hook itself, import useAxios from use-axios-client at the top of the component.
In the process of performing this request, the value loading will be true. If there’s an error, you’ll want to display that error state. Otherwise, if you have the returned data, you can display it in the UI.
The benefit of custom hooks like this is that it really cuts down on code and simplifies it overall.
If you’re looking for even simpler data fetching with Axios, try out a custom useAxios hook like this one.
What’s Next?
Congratulations! You now know how to use one of the most powerful HTTP client libraries to power your React applications.
I hope you got a lot out of this guide.
Want Even More? Join The React Bootcamp
The React Bootcamp takes everything you should know about learning React and bundles it into one comprehensive package, including videos, cheatsheets, plus special bonuses.
Gain the insider information 100s of developers have already used to become a React pro, find their dream job, and take control of their future:
React developer who loves to make incredible apps. Showing you how at ReactBootcamp.com
If this article was helpful, tweet it.
Learn to code for free. freeCodeCamp’s open source curriculum has helped more than 40,000 people get jobs as developers. Get started
freeCodeCamp is a donor-supported tax-exempt 501(c)(3) nonprofit organization (United States Federal Tax Identification Number: 82-0779546)
Donations to freeCodeCamp go toward our education initiatives and help pay for servers, services, and staff.
Использование 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 и ответов обработки.
Введение в вызовы API с помощью React и Axios
Из этого туториала вы узнаете, как использовать Axios для извлечения данных, а затем, как манипулировать ими и, в конечном итоге, отображать их на своей странице с функцией фильтрации. Вы узнаете, как пользоваться картой, фильтровать и включать методы по пути. Кроме того, вы будете создавать компонент высшего порядка (HOC) для обработки состояния загрузки выбранных данных из конечной точки API.
Нам нужно только установить модуль Axios для этого урока.
Извлечение данных
Мы будем использовать API генератора случайных пользователей для получения информации о случайных пользователях для использования в нашем приложении.
Давайте добавим модуль App.js в наше приложение, импортировав его в наш файл App.js
API генератора случайных пользователей предлагает множество вариантов для создания различных типов данных. Вы можете проверить документацию для получения дополнительной информации, но для этого урока мы будем просты.
Мы хотим получить десять разных пользователей, и нам нужны только имя, фамилия и уникальный идентификатор, который требуется для React при создании списков элементов. Также, чтобы сделать вызов немного более конкретным, давайте включим в качестве примера опцию национальности.
Ниже приведен API, к которому мы будем обращаться.
Вы можете скопировать и вставить его в свой браузер, и вы увидите возвращенные данные в формате JSON.
Теперь, следующая вещь, это сделать вызов API через Axios.
Прежде всего, давайте создадим состояние, чтобы мы могли хранить извлеченные данные.
Внутри нашего компонента App добавьте конструктор класса, а затем создайте состояние.
Если вы проверите результат вызова API в своем браузере, вы увидите, что в объекте имени есть первая и последняя пары ключ-значение, но нет пары ключ-значение для полного имени. Таким образом, мы будем объединять первое и последнее, чтобы создать полное имя внутри нового объекта JavaScript. Обратите внимание, что JSON и JavaScript Object — разные вещи, хотя в основном они работают одинаково.
Давайте двигаться шаг за шагом.
Здесь мы достигли имени первого значения в массиве результатов.
Теперь давайте воспользуемся встроенным в JavaScript методом map чтобы выполнить итерацию каждого элемента в массиве и создать новый массив объектов JavaScript с новой структурой.
Хранение данных
И последнее, но не менее важное: мы добавили функцию catch чтобы фактически перехватывать любые возможные ошибки во время выборки и отображать ошибку в виде предупреждающего сообщения.
Функциональность фильтрации
Ниже вы можете найти окончательную версию функции, которую мы создали.
React: простое и эффективное решение для управления состоянием приложений
Немного забегая вперед, скажу, что решение получилось чуть менее производительным, чем «классическое» сочетание хука useReducer() и инструментов, предоставляемых Context API (которые, собственно, и составляют ядро решения).
Решение не является законченным и находится в стадии активной разработки, поэтому приветствуются любые замечания и предложения, любая конструктивная критика.
Пока мне не представилось возможности испытать решение в «полевых условиях» (я намерен сделать это при первом удобном случае), но кажется, что оно подойдет для разработки приложений любой сложности при соблюдении двух важных условий:
Исходный код проекта находится здесь.
Результат
Давайте начнем с того, что мы хотим получить на выходе. И почему не воспользоваться готовыми решениями? Другими словами, зачем нам изобретать велосипед, когда, казалось бы, все давно придумано умными людьми?
Объясню простыми… кодом. Предположим, что мы хотим разработать «тудушку» со следующим функционалом:
Если переписать функционал тудушки, используя сочетание useReducer() и Context API (а также парочки «хаков»), код получится примерно таким:
Намного лучше как с точки зрения читаемости кода, так и, что особенно важно, с точки зрения производительности. Но константы! В принципе, без них можно обойтись. Но редуктор! Кажется, что без редуктора обойтись нельзя. Или все-таки можно? Вполне. А что насчет диспетчера? Можно ли обойтись без него? Нет, без диспетчера обойтись не получится, потому что управлять состоянием React-приложения можно только через него. Но его, как мы увидим дальше, совсем не обязательно использовать в явном виде.
Если переписать функционал тудушки с помощью решения, которое мы еще не рассматривали, но скоро рассмотрим, то код хранилища получится следующим:
Если «разнести» сеттеры, геттеры и экшены по отдельным файлам, то код хранилища получится таким:
То, что доктор прописал. Теперь давайте обо всем по порядку.
Концепция
Давайте рассуждать вслух.
Структура хранилища по возможности должна оставаться плоской, т.е. одноуровневой: это сильно упростит логику обновления состояния.
Далее, нам нужны операции для изменения состояния. Состояние может меняться синхронно и асинхронно, поэтому имеет смысл дифференцировать операции соответствующим образом. Назовем синхронные операции сеттерами ( setters ), а асинхронные — экшенами ( actions ).
Какую сигнатуру должны иметь сеттеры и экшены?
Очевидно, что сеттеры должны принимать какие-то параметры и иметь прямой доступ к состоянию для его изменения. Возвращать сеттеры должны модифицированное состояние в виде части глобального состояния, т.е. объект с ключом, соответствующим определенной части глобального состояния. Я пока не нашел более простого способа для корректной идентификации части модифицируемого сеттером состояния. Схематично это можно представить следующим образом:
Или, когда сеттер не использует состояние:
Или, когда название аргумента совпадает с названием части глобального состояния (ключом объекта состояния):
Экшены также могут принимать любое количество параметров, но не имеют прямого доступа к состоянию. Доступ экшенов к состоянию опосредован сеттерами, т.е. экшены меняют состояние только через сеттеры. Экшены не должны ничего возвращать. Сигнатура:
Геттеры могут принимать любое количество параметров и имеют прямой доступ к состоянию. Поскольку цель геттеров — даже не столько извлечение части состояния (потому что мы можем делать это напрямую из состояния, содержащегося в контексте), сколько вычисление производных данных, имеет смысл передавать геттерам состояние в распакованном виде, т.е. в виде отдельных частей. Также, поскольку геттеры могут использоваться для производства сложных вычислений, имеет смысл передавать им другие геттеры ( DRY ). Возвращать геттеры должны часть состояния или производные данные. Сигнатура:
Обратите внимание: геттеры не должны модифицировать состояние.
Теперь поговорим о том, как добиться правильной сигнатуры операций.
Реализация
Ремарка: функция unpackModule() — это простая утилита для преобразования модуля в объект, которая выглядит так:
Если сеттеры, например, импортируются как обычный объект, то у нас нет необходимости прибегать к помощи unpackModule() :
Если мы импортируем сеттеры по отдельности, их необходимо распаковать:
Обратите внимание: порядок вызова утилит имеет принципиальное значение. createActions() должны передаваться декорированные сеттеры.
Теперь рассмотрим createGetters() :
Самое интересное происходит в функции createSetters() :
Здесь мы также модифицируем сеттеры, но не просто передаем им состояние в качестве первого аргумента, а вычисляем новую часть состояния на основе (гарантированно) свежего состояния, которое при вызове получает колбек setState() :
Вот почему так важно, чтобы сеттер возвращал объект с ключом (или несколькими ключами), соответствующими ключам объекта состояния. Значения совпадающих ключей (части состояния) перезаписываются новыми значениями.
Вот и все. Для доступа к состоянию и операциям необходимо обернуть компоненты в провайдер контекста и вызвать хук useSimpleContext() в нужном компоненте:
Так что, как видите, мы вовсе не изобретали велосипед заново, а всего лишь сделали его немного лучше. Как я отмечал в начале статьи, ездить велосипед после этого стал немного медленнее (поскольку слегка потяжелел), но это только при разгоне. Зато выглядеть велосипед стал круче, да и «апгрейдить» его стало легче 😃
Пожалуй, это все, чем я хотел поделиться с вами в данной статье. Буду рад любой форме обратной связи.
