Как отправлять обновлять данные в гет запросe каждые 5 секунд на react js axios?

Чтобы обновлять данные в GET-запросе каждые 5 секунд в React с использованием Axios, вы можете использовать функциональный компонент и хук useEffect.

Для начала, установите пакет Axios с помощью npm или yarn, выполнив команду в вашем терминале:

npm install axios

Затем импортируйте его в ваш компонент:

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

Теперь вы можете создать свой React компонент и использовать хук useEffect для отправки GET-запроса каждые 5 секунд:

const MyComponent = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get("https://api.example.com/data");
        setData(response.data);
      } catch (error) {
        console.error(error);
      }
    };

    const interval = setInterval(() => {
      fetchData();
    }, 5000); // Здесь указано время задержки в миллисекундах, в данном случае 5 секунд

    fetchData(); // Вызываем fetchData сразу после монтирования компонента

    return () => {
      clearInterval(interval); // Очищаем интервал при размонтировании компонента
    };
  }, []);

  return (
    <div>
      {/* Отображаем полученные данные */}
      {data.map((item) => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
};

export default MyComponent;

В этом примере компонент MyComponent отправляет GET-запрос на "https://api.example.com/data" каждые 5 секунд с использованием функции fetchData. Полученные данные сохраняются в состоянии компонента с помощью хука useState и отображаются внутри компонента.

Также, чтобы предотвратить утечку памяти, мы используем функцию clearInterval в блоке return хука useEffect, чтобы очистить интервал при размонтировании компонента.

Важно отметить, что в этом примере мы передали пустой массив зависимостей [] вторым аргументом хука useEffect. Это означает, что эффект будет выполняться только один раз при монтировании компонента. Если вы хотите, чтобы запрос выполнялся при изменении определенных зависимостей, вы можете включить их в массив зависимостей.