Использование Axios с React

В мире веб-разработки обмен данными между клиентской и серверной сторонами играет решающую роль. Однако для того, чтобы ваше React-приложение могло взаимодействовать с сервером и получать или отправлять данные, вам понадобится мощный инструмент, который сделает этот процесс более эффективным и удобным – а именно, Axios. 

В этой статье мы узнаем, как интегрировать эту библиотеку в ваши React-проекты. 

Что такое Axios 

Axios – это JavaScript-библиотека для выполнения HTTP-запросов из браузера или среды выполнения Node.js. Она предоставляет простой интерфейс для взаимодействия с веб-серверами и API, делая процесс отправки и получения данных через HTTP более удобным и эффективным. 

Основные плюсы Axios:

  • Простота использования. Axios предоставляет интуитивно понятный API, что делает его отличным выбором для разработчиков, даже если они только начинают работать с HTTP-запросами. Он предлагает методы для отправки различных типов запросов, а также обработки ответов и ошибок.
  • Поддержка Promise (Промис). Axios использует Promise для обработки асинхронных операций, которые связаны с отправкой и получением HTTP-запросов. Благодаря этому вы можете писать чистый и читаемый код без колбэк-функций, а также создавать более структурированный код.
  • Поддержка запросов в браузере. Axios может использоваться как в браузере, так и на сервере. Таким образом, вы можете использовать один и тот же код для выполнения HTTP-запросов как на стороне клиента, так и на стороне сервера вашего приложения.
  • Интерцепторы. Axios помогает добавлять интерцепторы к запросам и ответам. Иными словами, вы сможете перехватывать HTTP-запросы перед их отправкой и вносить в них необходимые изменения. Это мощный механизм для манипуляции данными перед отправкой запроса или после получения ответа. Например, его часто используют для обработки токена аутентификации перед каждым запросом.
  • Автоматическая сериализация и разбор данных. Axios автоматически сериализует данные, отправляемые в теле запроса, в формат JSON, а также автоматически разбирает JSON-ответы от сервера. Это упрощает взаимодействие с REST API, которые часто работают с JSON-данными.
  • Обработка ошибок. Вместе с Axios вы получите удобный механизм для обработки различных видов ошибок: как сетевых, так и ошибок, которые возникают на сервере. 
  • Поддержка отмены запросов. Axios позволяет отменить активный запрос. Зачем это нужно? Например, в случаях, когда пользователь переключается между страницами или действиями и вы больше не хотите обрабатывать ответ от устаревшего запроса.

Как добавить Axios в React-проект

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

Шаг 1. Подберите подходящий сервер 

Чтобы вы могли пользоваться всеми преимуществами Axios и React без ограничений, предлагаем вам аренду выделенного сервера в RU-CENTER. Это самый надежный способ хранения данных на отдельном мощном устройстве в дата-центре в Москве. 

Наши серверы обеспечивают высочайший уровень безопасности, а поддержка 24/7 гарантирует оперативное реагирование на любые запросы и вопросы. Доверьтесь нам, и обеспечьте своему проекту надежный фундамент для эффективной работы.

Шаг 2. Добавьте Axios в React

Чтобы добавить Axios в ваш React-проект, вы можете воспользоваться менеджером пакетов npm или Yarn. 

Способ с npm:

  1. Откройте терминал и перейдите в директорию вашего проекта:

cd путь-к-вашему-проекту

  1. Для добавления Axios с помощью npm запустите следующую команду:

npm install axios

Способ с Yarn:

  1. Откройте терминал и перейдите в директорию вашего проекта:

cd путь-к-вашему-проекту

  1. Для добавления Axios с помощью Yarn запустите следующую команду:

yarn add axios

После завершения установки Axios будет доступен в вашем проекте React. Вы сможете импортировать его и использовать для отправки HTTP-запросов.

Как настроить Axios с помощью React

Настройка Axios с помощью React довольно проста и позволяет вам легко отправлять HTTP-запросы из ваших React-приложений. 

Сделать запрос GET

GET используется для запроса данных с сервера. Он отправляет запрос к указанному ресурсу (например, веб-странице) и возвращает содержимое этого ресурса. GET-запросы могут быть кэшированы и добавлены в историю браузера. Однако, из-за ограничений на длину URL, они могут не быть подходящими для отправки больших объемов данных.

Для выполнения GET-запроса с использованием Axios в React необходимо использовать метод «get()» вашего настроенного экземпляра Axios:

import React, { useEffect, useState } from 'react';

import axios from 'axios';

const UserList = () => {

  const [users, setUsers] = useState([]);

  useEffect(() => {

    const fetchUsers = async () => {

      try {

        const response = await axios.get('https://example.ru/users');

        setUsers(response.data);

      } catch (error) {

        console.error('Ошибка при получении данных:', error);

      }

    };

    fetchUsers();

  }, []);

  return (

    <div>

      <h1>Список пользователей</h1>

      <ul>

        {users.map((user) => (

          <li key={user.id}>{user.name}</li>

        ))}

      </ul>

    </div>

  );

};

export default UserList;

В этом коде создается функциональный компонент «UserList», который предназначен для отображения списка пользователей.

Давайте рассмотрим процесс более подробно:

  1. Хук useState используется для создания состояния «users», в котором будет храниться список пользователей. Изначально он устанавливается как пустой массив [].
  2. Хук useEffect. useEffect позволяет выполнять побочные эффекты в функциональных компонентах, и он выполняется после рендеринга компонента. В данном случае мы хотим выполнить GET-запрос к удаленному серверу, чтобы получить данные о пользователях.
  3. Внутри useEffect создается асинхронная функция fetchUsers, которая будет выполнять GET-запрос с использованием Axios.
  4. Конструкция try…catch вводится, чтобы обработать ошибки при выполнении GET-запроса. Если запрос успешен, данные будут доступны в response.data. Если возникнет ошибка при выполнении запроса, сообщение об ошибке выведется на консоль с помощью console.error.
  5. Затем мы вызываем функцию fetchUsers внутри useEffect. Это означает, что GET-запрос будет выполнен, когда компонент UserList будет смонтирован.
  6. Компонент «UserList» экспортируется, чтобы его можно было использовать в других частях приложения.
  7. В результате, при монтировании «UserList» он отправит GET-запрос к указанному URL и получит данные о пользователях, которые впоследствии отобразит на странице.

Сделать POST-запрос

POST отправляет данные на сервер с целью создания или обновления ресурса. 

POST-запросы обычно используются для отправки форм и данных в теле запроса. Они не кэшируются, не добавляются в историю и не могут стать закладками.

Для выполнения POST-запроса с использованием Axios в React вы можете использовать метод «post()» вашего настроенного экземпляра Axios:

import React, { Component } from 'react';

import axios from 'axios';

class CreateDataComponent extends Component {

  constructor(props) {

    super(props);

    this.state = {

      newData: '',

    };

  }

  handleCreateData = () => {

    const { newData } = this.state;

    const api = axios.create({

      baseURL: 'https://example.ru',

      headers: {

        'Content-Type': 'application/json',

      },

    });

    api.post('/endpoint', { data: newData })

      .then(response => {

        console.log('Данные успешно созданы:', response.data);

      })

      .catch(error => {

        console.error('Произошла ошибка при создании данных:', error);

      });

  };

  render() {

    return (

      <div>

        <input

          type="text"

          placeholder="Введите новые данные"

          onChange={e => this.setState({ newData: e.target.value })}

        />

        <button onClick={this.handleCreateData}>Создать данные</button>

      </div>

    );

  }

}

export default CreateDataComponent;

В этом примере был создан компонент React «CreateDataComponent», который позволяет ввести новые данные и отправить их на сервер с использованием запроса POST. 

Обратите внимание, что здесь нужно заменить «https://example.ru» и «endpoint» на фактический базовый URL и путь к ресурсу, на который вы хотите отправить POST-запрос.

После успешного выполнения POST-запроса ответ будет доступен в блоке «.then()», и вы можете обрабатывать данные, возвращаемые сервером. В случае ошибки она будет обработана в блоке «.catch()». 

Сделать запрос PUT

PUT используется для обновления существующего ресурса или создания нового, если такого не существует. Он отправляет данные целиком, перезаписывая существующий ресурс.

Для выполнения запроса PUT с использованием Axios в React вы можете использовать метод «put()» вашего настроенного экземпляра Axios:

import React, { Component } from 'react';

import axios from 'axios';

class UpdateDataComponent extends Component {

  constructor(props) {

    super(props);

    this.state = {

      updatedData: '',

    };

  }

  handleUpdateData = () => {

    const { updatedData } = this.state;

    const api = axios.create({

      baseURL: 'https://example.ru', // Замените на свой базовый URL

      headers: {

        'Content-Type': 'application/json',

      },

    });

    api.put('/endpoint', { data: updatedData })

      .then(response => {

        console.log('Данные успешно обновлены:', response.data);

      })

      .catch(error => {

        // Обработка ошибки

        console.error('Произошла ошибка при обновлении данных:', error);

      });

  };

  render() {

    return (

      <div>

        <input

          type="text"

          placeholder="Введите обновленные данные"

          onChange={e => this.setState({ updatedData: e.target.value })}

        />

        <button onClick={this.handleUpdateData}>Обновить данные</button>

      </div>

    );

  }

}

export default UpdateDataComponent;

В этом примере создан компонент React «UpdateDataComponent», который позволяет вам ввести обновленные данные и отправить их на сервер с использованием запроса PUT. 

Обратите внимание, что вам нужно заменить «https://example.ru» и «/endpoint» на фактический базовый URL и путь к ресурсу, который вы хотите обновить.

Сделать запрос DELETE

DELETE спользуется для удаления ресурса с сервера. Он указывает серверу, что нужно удалить указанный ресурс.

Для выполнения DELETE-запроса с использованием Axios в React вы можете использовать метод «delete()» вашего настроенного экземпляра Axios:

import React, { Component } from 'react';

import axios from 'axios';

class DeleteDataComponent extends Component {

  handleDeleteData = () => {

    const api = axios.create({

      baseURL: 'https://example.ru',

      headers: {

        'Content-Type': 'application/json',

      },

    });

    api.delete('/endpoint')

      .then(response => {

        console.log('Данные успешно удалены:', response.data);

      })

      .catch(error => {

        // Обработка ошибки

        console.error('Произошла ошибка при удалении данных:', error);

      });

  };

  render() {

    return (

      <div>

        <button onClick={this.handleDeleteData}>Удалить данные</button>

      </div>

    );

  }

}

export default DeleteDataComponent;

В этом примере создан компонент React «DeleteDataComponent», который позволяет удалять данные на сервере с помощью запроса DELETE. 

Как и в предыдущих запросах, вы должны заменить «https://example.ru» и «/endpoint» на фактический базовый URL и путь к ресурсу, который вы хотите удалить с помощью DELETE-запроса.

Вы можете использовать этот код в вашем приложении, чтобы позволить пользователям удалять данные или ресурсы на сервере с помощью DELETE-запросов.

Создать экземпляр с помощью Axios

Чтобы создать экземпляр Axios в React, вы можете использовать следующий код в вашем компоненте или в отдельном модуле:

import React, { useState, useEffect } from "react";

import axios from "axios";

const api = axios.create({

  baseURL: "https://jsonplaceholder.typicode.com/posts",

  headers: {

    "Content-Type": "application/json",

  },

});

export default function App() {

  const [post, setPost] = useState(null);

  useEffect(() => {

    api.get("/1").then((response) => {

      setPost(response.data);

    });

  }, []);

  function deletePost() {

    api.delete("/1").then(() => {

      alert("Пост удален!");

      setPost(null);

    });

  }

  if (!post) return "Пост не найден!";

  return (

    <div>

      <h1>{post.title}</h1>

      <p>{post.body}</p>

      <button onClick={deletePost}>Удалить пост</button>

    </div>

  );

}

В этом коде создается экземпляр Axios с использованием «axios.create()». Этот экземпляр будет иметь базовый URL и заголовки, указанные в настройках по умолчанию.

Вы можете использовать этот экземпляр для выполнения запросов внутри вашего компонента React. К примеру, здесь выполняется GET-запрос для получения данных о посте и DELETE-запрос для удаления поста с сервера.

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

Обработка ошибок

Если при создании запроса с использованием Axios возникает ошибка, например, из-за неправильных данных, обращения к несуществующей конечной точке или сетевой ошибки, вам следует предпринять следующие шаги:

import axios from "axios";

import React from "react";

const baseURL = "https://example.ru ";

export default function App() {

  const [post, setPost] = React.useState(null);

  const [error, setError] = React.useState(null);

  React.useEffect(() => {

    axios.get(`${baseURL}/asdf`)

      .then((response) => {

        setPost(response.data);

      })

      .catch((error) => {

        setError(error);

      });

  }, []);

  if (error) return `Ошибка: ${error.message}`;

  if (!post) return "Пост не найден!";

  return (

    <div>

      <h1>{post.title}</h1>

      <p>{post.body}</p>

    </div>

  );

}

В этом коде происходит следующее:

  1. Внутри «useEffect» выполняется GET-запрос с использованием Axios. Если запрос завершается успешно, данные сохраняются в «post». Если возникает ошибка, ошибка сохраняется в «error».
  2. Затем, в блоке «if (error)», вы проверяете, есть ли ошибка. Если «error» не равен «null», то сообщение об ошибке появится благодаря «error.message». Это и есть обработка ошибки.
  3. Если ошибки нет и данные успешно получены (то есть «post» не равен «null»), то содержимое поста отображается на странице.

В заключение, использование Axios с React предоставляет мощный и удобный инструмент для работы с HTTP-запросами в ваших приложениях. Благодаря своей простоте и гибкости Axios облегчает взаимодействие с удаленными серверами, позволяя эффективно обрабатывать данные и ошибки. 

Независимо от того, создаете ли вы запросы на получение данных, отправку форм или выполнение других операций, Axios в сочетании с React помогает сделать этот процесс надежным и удобным для всех разработчиков.

Всё ещё остались вопросы?