Введение
Axios — небольшая, но очень популярная библиотека для создания асинхронных запросов. Он прекрасен тем, что работает и в браузере, и в Nodejs, поддерживает даже Internet Explorer.
Представьте, что у проекта есть разделение на frontend и backend, чтобы выполнить обращение от frontend к backend нам необходим http клиент. Библиотека Axios выступает в роли http клиента для отправки запроса к backend, он получает ответ, и отображает его на frontend.
Когда отсутствует разделение backend и frontend, нам не требуется использоваться axios, но когда это разделение присутствует то в любом случае чтобы обратиться к backend требуется использовать http client.
Aoxis основан на обещаниях, тем самым при каждом запросе, мы будем получать ответ от объекта запроса.
Запросы можно перехватывать и отменять, на стороне клиента так же присутствует встроенная защита от подделки меж—сайтовых запросов.
В данной публикации вы увидите работу запросов Axios в React, используя примеры вы можете протестировать запросы на своем собственном сервере.
Обещание — это обязательное сообщение получаемое как от клиента к серверу, так и наоборот. То есть при выполнении кода, мы понимаем что получим обратно данные с сервера благодаря обещанием.
Возможности библиотеки
- Использование XML запросов
- Использование http запросов от node.js
- Поддерживание API “Обещаний”
- Перехватывает запросы и ответы
- Отменяет запросы
- Автоматически трансформирует в JSON
- Поддержка защиты от XSFR на стороне клиента
Что требуется
- На вашем сервере установлена версия Node.js выше 10.17.хх
- Ваш заготовленный проект React
- В вашем проекте установлена библиотека axios
Добавление Axios в ваш проект
Создайте или перейдите в свой проект.
npx create-react-app your-projectНаиболее популярным способ является его установка, используя менеджер пакетов npm.
npm install axiosИмпортируйте Aoxis в ваш проект, где вы его хотите использовать.
Создание GET запроса
Требуется создать новый компонент под любым именем, в нашем случае мы будем использовать наименование CarList. Данный компонент требуется поместить в директории вашего проекта, в нашем случае /mnt/c/Project/.
mkdir /mnt/c/Project/Переходим в наш новый созданный документ CarList используя любой текстовый редактор на ваш выбор.
nano /mnt/c/Project/CarListПопробуйте выполнить Get запрос используя пример, в результате вы получите список машин марки Mitsubishi.
const axios = require('axios');
axios.get('https://myfakeapi.com/api/cars/name/Mitsubishi') // Возвращение обещаний используя get-запрос
.then((response) => { // Получение данных и их обработка
console.log(response.data);})
.catch((error) => { // Если запрос не будет выполнен, то ошибка выводится в терминал
console.error(error);});В результате мы получаем список данных от сервера благодаря обещаниям.
Для получения обещания от сервера мы используем axios.get(someurl) с ссылкой из конечной точки API.
Создание POST запроса
В вашем проекте потребуется создать новый компонент UserAdd.js.
Введите код для Post запроса в вашем файле UserAdd.js который позволит пользователю вводить данные и отправлять API.
nano /mnt/c/Project/UserAdd.jsПопробуйте выполнить POST запрос используя пример, в результате вы добавите пользователя.
const axios = require('axios');
axios
.post('https://myfakeapi.com/api/users/', {
firstName: 'Boris',
lastName: 'Moore'
}) // Использование post-запроса, с указанием пользователя
.then((response) => { // Получение данных и их обработка
console.log(response.data);})
.catch((error) => { // Если запрос не будет выполнен, то ошибка выводится в терминал
console.error(error);});Проверяем работоспособность кода, в результате получим обещание от сервера.
Создание Delete запроса
В вашем проекте потребуется создать новый компонент Remove.js.
nano /mnt/c/Project/Remove.jsПопробуйте выполнить DELETE запрос используя пример, в результате вы удалите пост.
componentDidMount() {
axios.delete(`https://myfakeapi.com/api/users/`)
.then(() => this.setState({ status: 'Delete successful' }));
}Использование базового экземпляра в Axios
Для этого примера потребуется создать новый компонент api.js.
nano /mnt/c/Project/myapi.jsСоздав данный компонент, мы указываем стандартную ссылку нашего сервера для получения и отправки запросов.
import axios from 'axios';
export default axios.create({
baseURL: `http://yourapiurl.com/`
});Для тестирования будет использоваться компонент CarList.js
import React from 'react';
import axios from 'axios';
import Api from '/mnt/c/Project/api';
export default class CarList extends React.Component {
\\ . . .
componentDidMount() {
Api.get(`curl --location --request GET 'api/cars/name/Mitsubishi'`)
.then(res => {
const cars = res.data;
this.setState({ cars });
})}\\После создания компонента api, нам не требуется постоянно указывать ссылку на сервер для получения и отправки запросов. Вам требуется лишь изменить путь до требуемого запроса в нужном компоненте.
Использование async и await
Для тестирования будет использоваться компонент CarList.js
Ключевое слово await разрешает общение и отправляет результат в ответ. Значение может присваиваться к переменной.
import API from '/mnt/c/Project/api';
export default class CarList extends React.Component {
componentDidMount() {
const response = await Api.get(`curl --location --request GET 'api/cars/name/Mitsubishi'`)
console.log(response);
console.log(response.data);})}В примере мы заменяем .then(), вместо него полученные данные отобразятся в консоли. Обещание будет выполнено и значение будет сохранено внутри переменной полученного ответа.
Проверка
Перед проверкой запросов, проверьте указаны ли у вас запросы в компоненте программ.
В нашем случае мы будем редактировать компонент yourapp.js.
import CarList from './components/CarList.js';
import PostRemove from './components/PostRemove.js';
import UserAdd. from './components/UserAdd.js';
function App() {
return (
<div ClassName="App">
<CarList/>
<UserAdd/>
<PostRemove/>
</div>)}Обработка ошибок запросов
Один из важных аспектов при работе с получаемыми данными от сервера, мы можем их получить только при условии отсутствии ошибок выполняя запрос. Для отображения ошибок, вам поможет функция catch.
catch (error) { // обработка ошибки и вывод ее в консоль
console.log(“error get”, error);}Если при выполнении запроса у вас будет ошибка, то благодаря этой функции ошибка будет выведена в консоль.
Заключение
Положительными аспектами библиотеки Axios является его возможность автоматической конвертации в JSON, нам не требуется проводить дополнительные манипуляции, чтобы преобразовать объект в JSON, потому что мы получим его в ответе. Передача параметров в запрос, при выполнении метода мы можем передать определенные параметры в наш запрос.
В этой публикации мы разобрали запросы из библиотеки axios, как они работают вместе с React.
