By PaulHalliday and christinagorton
Многим веб-проектам на некотором этапе их развития требуется взаимодействие с REST API. Axios — это облегченный клиент HTTP на базе сервиса $http
с Angular.js v1.x, похожего на собственный JavaScript Fetch API.
Axios основан на промисах, что дает вам возможность использовать возможности JavaScript async
и await
для получения более удобочитаемого асинхронного кода.
Вы можете перехватывать и отменять запросы, также в клиенте имеется встроенная защита от подделки запросов между сайтами.
В этой статье вы увидите примеры использования Axios для доступа к популярному JSON Placeholder API из приложения React.
Чтобы следовать за примерами этой статьи, вам потребуется следующее:
В этом разделе мы добавим Axios в проект React digital-ocean-tutorial
, созданный вами при выполнении учебного модуля Настройка проекта React Project с помощью приложения Create React App.
Чтобы добавить Axios в проект, откройте терминал и поменяйте каталоги в вашем проекте:
- cd digital-ocean-tutorial
Затем запустите эту команду для установки Axios:
- npm install axios
Далее вам потребуется импортировать Axios в файл, где вы захотите его использовать.
GET
В этом примере мы создадим новый компонент и импортируем в него Axios для отправки запроса GET
.
Создайте в папке src
вашего проекта React новый компонент с именем PersonList.js
:
- nano src/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>{person.name}</li>)}
</ul>
)
}
}
Вначале вы импортируете React и Axios так, чтобы их можно было использовать в компоненте. Затем вы прикрепляетесь к крюку жизненного цикла componentDidMount
и выполняете запрос GET
.
Вы используете axios.get(url)
с URL от конечной точки API, чтобы получить промис, возвращающий объект ответа. Внутри объекта ответа имеются данные, которым присвоено значение person
.
Также вы можете получить и другую информацию о запросе, в том числе код состояния res.status
, или дополнительную информацию внутри res.request
.
POST
На этом шаге мы используем Axios с еще одним методом запросов HTTP, а именно POST
.
Удалите предыдущий код в PersonList
и добавьте следующий код, чтобы создать форму для ввода данных пользователя и последующей отправки контента в API методом POST
:
import React from 'react';
import axios from 'axios';
export default class PersonList 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
, мы вначале захватываем ввод user
. Затем мы добавляем ввод вместе с запросом POST
и получаем ответ. Вы можете отправить ответ в console.log
, где ввод user
будет показан в форме.
DELETE
В этом примере вы видите, как удалять элементы из API, используя axios.delete
и передавая URL как параметр.
Измените код формы из примера POST
, чтобы удалить пользователя вместо добавления нового:
import React from 'react';
import axios from 'axios';
export default class PersonList 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="text" name="id" onChange={this.handleChange} />
</label>
<button type="submit">Delete</button>
</form>
</div>
)
}
}
В этом случае объект res
предоставляет информацию о запросе. Затем вы можете снова использовать console.log
для этой информации после отправки формы.
В этом примере вы видите, как можно создать базовый экземпляр, в котором вы можете задать определение URL-адреса и любых других элементов конфигурации.
Создайте отдельный файл с именем api.js
:
- nano src/api.js
Экспортируйте новый экземпляр axios
со следующими значениями по умолчанию:
import axios from 'axios';
export default axios.create({
baseURL: `http://jsonplaceholder.typicode.com/`
});
После настройки экземпляра по умолчанию его можно использовать внутри компонента PersonList
. Новый экземпляр импортируется следующим образом:
import React from 'react';
import axios from 'axios';
import API from '../api';
export default class PersonList 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.
async
и await
В этом примере вы видите, как использовать async
и await
для работы с промисами.
Ключевое слово await
разрешает промис
и возвращает значение
. Затем значение
может быть присвоено переменной.
handleSubmit = async event => {
event.preventDefault();
//
const response = await API.delete(`users/${this.state.id}`);
console.log(response);
console.log(response.data);
};
В этом примере кода выполняется замена .then()
. Промис
разрешается, и его значение сохраняется в переменной response
.
В этом учебном модуле мы изучили несколько примеров использования Axios в приложении React для создания запросов HTTP и ответов обработки.
Если вы хотите узнать больше о React, ознакомьтесь с серией Программирование на React.js или посмотрите страницу темы React, где вы найдете дополнительные упражнения и проекты для программирования.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
I create educational content over at YouTube and https://developer.school.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
Full documentation for every DigitalOcean product.
The Wave has everything you need to know about building a business, from raising funding to marketing your product.
Stay up to date by signing up for DigitalOcean’s Infrastructure as a Newsletter.
New accounts only. By submitting your email you agree to our Privacy Policy
Scale up as you grow — whether you're running one virtual machine or ten thousand.
Sign up and get $200 in credit for your first 60 days with DigitalOcean.*
*This promotional offer applies to new accounts only.