06.11.2022

Как в React использовать Axios

Введение

Axios — небольшая, но очень популярная библиотека для создания асинхронных запросов. Он прекрасен тем, что работает и в браузере, и в Nodejs, поддерживает даже Internet Explorer.

Представьте, что у проекта есть разделение на frontend и backend, чтобы выполнить обращение от frontend к backend нам необходим http клиент. Библиотека Axios выступает в роли http клиента для отправки запроса к backend, он получает ответ, и отображает его на frontend.

Когда отсутствует разделение backend и frontend, нам не требуется использоваться axios, но когда это разделение присутствует то в любом случае чтобы обратиться к backend требуется использовать http client.
Aoxis основан на обещаниях, тем самым при каждом запросе, мы будем получать ответ от объекта запроса.

Запросы можно перехватывать и отменять, на стороне клиента так же присутствует встроенная защита от подделки меж—сайтовых запросов.

В данной публикации вы увидите работу запросов Axios в React, используя примеры вы можете протестировать запросы на своем собственном сервере.

Обещание — это обязательное сообщение получаемое как от клиента к серверу, так и наоборот. То есть при выполнении кода, мы понимаем что получим обратно данные с сервера благодаря обещанием.

Возможности библиотеки

Что требуется

Добавление 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.