Как использовать Axios в React
Development, Java | Комментировать запись
На том или ином этапе разработки многим веб-проектам необходимо взаимодействовать с REST API. Axios — это облегченный HTTP-клиент, основанный на сервисе $http внутри Angular.js v1.x и подобный встроенному в JavaScript Fetch API.
Читайте также: Основы Fetch API в JavaScript
Axios основан на промисах, что позволяет пользоваться преимуществами async и await для создания более читаемого асинхронного кода.
Вы также можете перехватывать и отменять запросы. Кроме того, в Axios на стороне клиента имеется встроенная защита от подделки межсайтовых запросов.
В этой статье вы найдете примеры того, как использовать Axios для доступа к популярному JSON Placeholder API в приложении React.
Требования
- Локальная установка Node.js, которую можно получить, следуя инструкциям для вашего дистрибутива: Mac OS, Ubuntu, CentOS, Debian.
- Свежий проект React с поддержкой Create React App.
- Базовые навыки работы с JavaScript, HTML и CSS.
Это руководство было протестировано на версиях Node.js v16.13.1, npm v8.1.4, react v17.0.2 и axios v0.24.0.
1: Добавление Axios в проект
Для начала поговорим о том, как добавить Axios в проект React.
npx create-react-app react-axios-example
Чтобы добавить Axios в проект, откройте терминал и перейдите в каталог проекта:
cd react-axios-example
Затем выполните эту команду, чтобы установить Axios:
npm install axios@0.24.0
Затем нужно импортировать Axios в файл, в котором вы хотите его использовать.
2: Создание запроса GET
Давайте создадим новый компонент и импортируем в него Axios для отправки запроса GET.
Внутри проекта React вам нужно будет создать новый компонент по имени PersonList.
Сначала создайте новый подкаталог components в каталоге src:
mkdir src/components
В этом каталоге создайте PersonList.js и добавьте в компонент следующий код:
import React from 'react';
import axios from 'axios';
export default class PersonList extends React.Component {
state = {
persons: []
}
componentDidMount() {
axios.get(`https://jsonplaceholder.typicode.com/users`)
.then(res => {
const persons = res.data;
this.setState({ persons });
})
}
render() {
return (
<ul>
{
this.state.persons
.map(person =>
<li key={person.id}>{person.name}</li>
)
}
</ul>
)
}
}
Во-первых, здесь мы импортируем React и Axios, чтобы их можно было использовать в компоненте. Во-вторых, мы подключаемся к хуку жизненного цикла componentDidMount и выполняем запрос GET.
axios.get(url) с URL-адресом из конечной точки API позволяет получить промис, который возвращает объект ответа. Внутри объекта ответа есть данные, которым затем присваивается значение person.
Вы также можете получить другую информацию о запросе, например, код состояния в res.status или дополнительную информацию внутри res.request.
Добавьте этот компонент в app.js:
import PersonList from './components/PersonList.js';
function App() {
return (
<div ClassName="App">
<PersonList/>
</div>
)
}
Затем запустите ваше приложение:
npm start
Просмотр приложения в браузере. На странице будет представлен список из 10 имен.
3: Создание POST-запроса
На этом этапе мы попробуем использовать Axios с другим методом HTTP-запроса, который называется POST.
Внутри проекта React нужно создать новый компонент по имени PersonAdd.
Создайте файл PersonAdd.js и добавьте следующий код, чтобы создать форму, которая позволяет пользователю вводить данные и затем отправляет содержимое в API:
import React from 'react';
import axios from 'axios';
export default class PersonAdd extends React.Component {
state = {
name: ''
}
handleChange = event => {
this.setState({ name: event.target.value });
}
handleSubmit = event => {
event.preventDefault();
const user = {
name: this.state.name
};
axios.post(`https://jsonplaceholder.typicode.com/users`, { user })
.then(res => {
console.log(res);
console.log(res.data);
})
}
render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
<label>
Person Name:
<input type="text" name="name" onChange={this.handleChange} />
</label>
<button type="submit">Add</button>
</form>
</div>
)
}
}
Внутри функции handleSubmit предотвращается стандартное действие формы. Затем мы обновляем state до ввода user.
Использование POST дает вам тот же объект ответа с информацией, которую вы можете использовать внутри вызова then.
Чтобы выполнить POST запрос, сначала нужно зафиксировать пользовательский ввод. Затем следует добавить ввод вместе с POST запросом, который выдаст вам ответ. После этого можно применить к ответу console.log, который должен отображать пользовательский ввод в форме.
Добавьте этот компонент в app.js:
import PersonList from './components/PersonList';
import PersonAdd from './components/PersonAdd';
function App() {
return (
<div ClassName="App">
<PersonAdd/>
<PersonList/>
</div>
)
}
Затем запустите приложение:
npm start
Просмотрите приложение в браузере. На экране появится форма для добавления новых пользователей. После отправки нового пользователя проверьте консоль.
4: Создание DELETE запроса
В этом примере вы увидите, как удалять элементы из API с помощью axios.delete, передавая URL-адрес в качестве параметра.
Внутри проекта React нужно создать новый компонент по имени PersonRemove.
Создайте PersonRemove.js и добавьте в него следующий код для удаления пользователя:
import React from 'react';
import axios from 'axios';
export default class PersonRemove extends React.Component {
state = {
id: ''
}
handleChange = event => {
this.setState({ id: event.target.value });
}
handleSubmit = event => {
event.preventDefault();
axios.delete(`https://jsonplaceholder.typicode.com/users/${this.state.id}`)
.then(res => {
console.log(res);
console.log(res.data);
})
}
render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
<label>
Person ID:
<input type="number" name="id" onChange={this.handleChange} />
</label>
<button type="submit">Delete</button>
</form>
</div>
)
}
}
Опять же, объект res предоставляет данные о запросе. При помощи console.log мы собираем эту информацию после отправки формы.
Добавьте в app.js следующие строки:
import PersonList from './components/PersonList';
import PersonAdd from './components/PersonAdd';
import PersonRemove from './components/PersonRemove';
function App() {
return (
<div ClassName="App">
<PersonAdd/>
<PersonList/>
<PersonRemove/>
</div>
)
}
Запустите приложение:
npm start
Просмотрите приложение в браузере. На экране вы увидите форму для удаления пользователей.
5: Базовый экземпляр в Axios
В этом примере вы увидите, как настроить базовый экземпляр, в котором можно определить URL-адрес и любые другие элементы конфигурации.
Создайте отдельный файл по имени api.js:
nano src/api.js
Экспортируйте новый экземпляр axios со следующими стандартными значениями:
import axios from 'axios';
export default axios.create({
baseURL: `http://jsonplaceholder.typicode.com/`
});
После настройки базового экземпляра его можно использовать внутри компонента PersonRemove. Импортировать его можно следующим образом:
import React from 'react';
import API from '../api';
export default class PersonRemove extends React.Component {
// ...
handleSubmit = event => {
event.preventDefault();
API.delete(`users/${this.state.id}`)
.then(res => {
console.log(res);
console.log(res.data);
})
}
// ...
}
Поскольку http://jsonplaceholder.typicode.com/ теперь является базовым URL-адресом, вам больше не нужно вводить весь URL-адрес каждый раз, когда вы хотите перейти к другой конечной точке в API.
6: Использование async и await
В этом примере вы увидите, как использовать async и await для работы с промисами.
Ключевое слово await разрешает промис и возвращает значение, которое затем может быть присвоено переменной. Давайте вернемся к файлу PersonRemove.js.
import React from 'react';
import API from '../api';
export default class PersonRemove extends React.Component {
// ...
handleSubmit = event => {
event.preventDefault();
const response = await API.delete(`users/${this.state.id}`);
console.log(response);
console.log(response.data);
}
// ...
}
В этом примере кода мы заменили .then(). Промис разрешается, а его значение сохраняется внутри переменной response.
Итоги
В этом руководстве мы рассмотрели несколько примеров использования Axios в приложении React – мы создали несколько HTTP-запросов и обработали ряд ответов.
Tags: Axios, Javascript, React