Axios очень часто делает get запросы

Question

У меня есть сайт который партит данные с сервера при помощи axios get, но axios делает запросы очень часто, мне это не нравится. Из-за такой частоты запросов получается некая синхронизация с сервером, мне это опять же не устраивает. И надо сделать так, чтобы axios делал запросы хотя бы раз в 3 минуты.
Класс, который берёт посты:

import axios from "axios";

const url = "http://localhost:5000/api/posts";

class PostManager {
  // Этот метод берёт посты
  async getPosts(set) {
    try {
      const res = await axios.get(url);
      set(res.data);
    } catch (err) {
      // Some...
    }
  }
  createPost(title, body, publish_date, title_image_number, author) {
    axios.post(url + "/", {
      title,
      body,
      publish_date,
      title_image_number,
      author
    });
  }
}

export default PostManager;

Тут вызываем этот метод:

import React, { useState } from "react";
import { Loader } from "./Components";
import Article from "./Article";
import Header from "./Header";
import Nav from "./Nav";
import PostsManager from "../PostsManager";

const Home = ()=> {
    const [posts, setPosts] = useState([]);
    const posts_manager = new PostsManager();
    
    // Get posts
    posts_manager.getPosts(setPosts);
    
    return (
        <main className="main" onWheel={ scrolling }>
            <Header />
            <Nav />
            <div className="content block">
                {
                    posts.length !== 0 ? posts.map(post=> {
                        return <Article post={ post } title={ post.title } title_image_number={ post.title_image_number } key={ post._id } />
                    })
                    :
                    <Loader />
                }
            </div>
        </main>
    );
};

//
let scroller = {
    now: 0,
    need: 0
};
function scrolling(e) {
    let wheel = e.deltaY;

    if (wheel > 1)
        wheel = 1;
    if (wheel < -1)
        wheel = -1;

    if (Math.round(scroller.now) === scroller.need)
        scroller.need += wheel * window.innerHeight;
}

setInterval(()=> {
    const main = document.querySelector(".main");

    if (scroller.need < 0)
        scroller.need = 0;
    if (scroller.need > main.scrollHeight - window.innerHeight)
        scroller.need = main.scrollHeight - window.innerHeight;

    scroller.now = lerp(scroller.now, scroller.need, .1);

    main.scrollTo(0, scroller.now);

    document.querySelector("#up_button").onclick = ()=>
        scroller.need = 0;
}, 1000/60);

function lerp (start, end, amt){
    return (1 - amt) * start + amt * end;
}

export default Home;

Answer 1

Надо заменить:

const posts_manager = new PostsManager();

// Get posts
posts_manager.getPosts(setPosts);

на что-то типа (естественно импортировать хук useEffect из react):

useEffect(
    () => {
        const posts_manager = new PostsManager();
        const interval = setInterval(
            () => {
                posts_manager.getPosts(setPosts);
            },
            3 * 60 * 1000,
        )

        return () => {
            clearInterval(interval);
        };
    },
    [],
);

На данный момент у вас запрос шлется на каждый ререндер компонента.

БЛОГ НА HUSL

Axios очень часто делает get запросы

Ответы (1 шт):