Многие веб-приложения на определенном этапе разработки сталкиваются с необходимостью взаимодействия с REST API. Для React-приложений мы можем использовать Axios, легковесный HTTP-клиент, основанный на $http сервисе в Angular.js v1.x. Его возможности похожи на встроенный в JavaScript Fetch API.
Axios основан на промисах, что дает нам возможность использовать встроенные в JavaScript async и await для написания более читаемого синхронного кода. Он также поддерживает перехват и отмену запросов. Кроме того, в нем есть встроенная защита на стороне клиента от подделки межсайтовых запросов.
В этом руководстве мы покажем, как использовать Axios для доступа к популярному JSON Placeholder API в демонстрационном приложении React. Вы можете узнать больше о формате JSON в JavaScript из этого руководства.
Предварительные требования
Для выполнения шагов, описанных в этом руководстве, вам понадобятся следующие компоненты:
- Правильно настроенный сервер Ubuntu. Вот шаги по настройке собственного сервера Ubuntu на CloudSigma.
- Установленная последняя версия Node.js. Ознакомьтесь с тем, как установить Node.js на Ubuntu.
- Новый проект React, созданный с помощью Create React App. Будет полезно сначала изучить и выполнить это руководство по настройке проекта React с использованием Create React App.
- Базовое понимание HTML, CSS и JavaScript.
Шаг 1. Установка Axios в проект React
Axios доступен напрямую как npm модуль. Посмотрите Axios на npm. Все, что нам нужно, — это создать проект React и установить пакет Axios.
Следующая команда npx запустит create-react-app для создания нового проекта React. Имя проекта будет использоваться для создания отдельного каталога для проекта. Здесь мы назвали проект react-axios-demo. Запустите команду:
|
1 |
npx create-react-app react-axios-demo |
Перейдите в только что созданный каталог проекта:
|
1 |
cd react-axios-demo/ |
Затем вызовите команду npm install для установки Axios. Если версия не указана, то npm автоматически загрузит и установит последнюю версию Axios:
|
1 |
npm install axios |
Наш проект готов к использованию Axios! Пришло время применить его возможности на практике.
Шаг 2. Создание GET-запроса
На этом шаге мы покажем создание нового компонента, который использует Axios для отправки GET-запроса.
Сначала создайте новый компонент PersonList, который будет отображать список имен. Создайте отдельный каталог для хранения компонента:
|
1 |
mkdir -pv src/components |
Затем создайте файл PersonList.js :
|
1 |
touch PersonList.js |
Откройте файл в текстовом редакторе. Мы используем Visual Studio Code для удобства и читаемости. Введите следующий код JavaScript:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
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>) конечной точки API для получения промиса (возвращает объект ответа). Объект ответа содержит нужные данные. Затем мы присваиваем их значению person. Мы также можем собрать дополнительную информацию о запросе, например код состояния в res.status или дополнительную информацию из res.request.
Затем нам нужно добавить наш компонент в основной App.js файл. Добавьте следующий код:
|
1 2 3 4 5 6 7 8 9 |
import PersonList from './components/PersonList.js'; function App() { return ( <div ClassName="App"> <PersonList/> </div> ) } |
Настройка для этого шага завершена. Теперь вы можете запустить приложение и протестировать его в своем любимом браузере. Запустите сервер разработки:
|
1 |
npm start |
Как мы видим, результат показывает список имен людей в случайном порядке:
Шаг 3. Создание POST-запроса
В этом разделе мы покажем использование Axios для выполнения другого метода HTTP-запроса, который называется POST. Чтобы продемонстрировать это, наша цель — создать новый компонент в нашем проекте React под названием PersonAdd.
Создайте файл PersonAdd.js:
|
1 |
touch src/components/PersonAdd.js |
Затем откройте файл в текстовом редакторе и введите следующий код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
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> Имя персоны: <input type="text" name="name" onChange={this.handleChange} /> </label> <button type="submit">Добавить</button> </form> </div> ) } } |
В этом коде мы принимаем ввод пользователя и отправляем (POST) содержимое в API. Внутри handleSubmit функции мы предотвращаем действие по умолчанию для формы и обновляем состояние введенными пользователем данными. При использовании POST возвращается тот же объект ответа. Мы можем использовать этот объект внутри вызова then. Чтобы выполнить запрос POST, мы перехватываем ввод пользователя и добавляем его вместе с запросом POST. Это дает нам ответ. Мы записываем ответ в лог с помощью console.log. Он должен показать ввод user в форме.
Затем добавьте компонент в App.js. Полный код должен выглядеть следующим образом:
|
1 2 3 4 5 6 7 8 9 10 11 |
import PersonList from './components/PersonList'; import PersonAdd from './components/PersonAdd'; function App() { return ( <div ClassName="App"> <PersonAdd/> <PersonList/> </div> ) } |
Теперь время протестировать изменения. Запустите сервер разработки:
|
1 |
npm start |
Проверьте изменения в веб-браузере:
Шаг 4. Создание DELETE-запроса
В этом разделе мы продемонстрируем удаление элементов из API с помощью axios.delete и использованием URL-адреса в качестве параметра. Для демонстрации создайте компонент PersonRemove. Создайте файл PersonRemove.js в каталоге src/components:
|
1 |
touch src/components/PersonRemove.js |
После этого откройте файл в текстовом редакторе и добавьте следующий код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
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> ID пользователя: <input type="number" name="id" onChange={this.handleChange} /> </label> <button type="submit">Удалить</button> </form> </div> ) } } |
Здесь объект res предоставляет информацию о запросе. Затем мы можем использовать console.log после отправки формы.
Затем импортируйте компонент в App.js:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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> ) } |
Время снова протестировать наш код. Запустите сервер:
|
1 |
npm start |
Вы должны увидеть новую форму, которая принимает имя пользователя и удаляет его из списка:
Шаг 5. Использование базового экземпляра в Axios
Теперь мы будем работать с базовым экземпляром Axios. Здесь мы можем определить URL-адрес и другие элементы конфигурации. Чтобы реализовать это, создайте отдельный файл api.js:
|
1 |
touch src/api.js |
Откройте его в текстовом редакторе и введите следующий код:
|
1 2 3 4 5 |
import axios from 'axios'; export default axios.create({ baseURL: `http://jsonplaceholder.typicode.com/` }); |
После настройки мы можем использовать его внутри компонента PersonRemove . Вот как будет выглядеть код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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 разрешает promise и возвращает значение. Мы можем присвоить это значение переменной для более удобного использования.
Вот как будет выглядеть обновленный код PersonRemove.js:
|
1 2 3 4 5 6 7 8 9 10 11 |
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(). Как только promise будет разрешен, мы сохраняем значение в переменной response.
Заключение
В этом руководстве мы рассмотрели различные примеры использования Axios для работы с REST API. Примеры кода демонстрируют создание HTTP-запросов и обработку ответов.
Хотите узнать больше о JavaScript? Ознакомьтесь с другими нашими руководствами для начинающих по различным концепциям и возможностям JavaScript, например, дата и время, работа со строками, классы, и объекты.
Приятного программирования!
Комментарии
Комментариев пока нет. Будьте первым.