Question

如何使用 React 每小时调用一次 API

2022-01-03

1625

javascript reactjs settimeout setinterval

我想知道如何在第一次重新加载页面时获取 api，然后每小时再次调用 api 一次来更新我的 UI，因为该 api 默认每小时更新一次

这是我的代码

const [news, setNews] = useState([])

useEffect(() => {
    setInterval(() => {
        (async () => {
            tryÏ {
                const res = await fetch(`https://newsapi.org/v2/top-headlines?country=""""&apiKey=""""""""`)
                const data = await res.json()
                setNews(data)
                console.log("yes")
            } catch (error) {
                console.log(error)
            }
        })()
    }, 36000000);
}, [])

使用该代码，我无法在第一次重新加载页面时获得结果，只能在一小时后...

Answer 1

将您的 API 调用移至单独的函数。在页面加载时和在超时时调用它：

let callApi = async () => {
        try {
            const res = await fetch(url)
            const data = await res.json()
            setNews(data)
            } catch (error) {
            console.log(error)
        }
    };

useEffect(() => {
    callApi();

    setInterval(callApi, 1000 * 60 * 60)
});

Answer 2

您可以创建另一个函数并从间隔和外部调用。

const [news, setNews] = useState([]);

useEffect(() => {
  const fetchData = async () => {
    try {
      const res = await fetch(
        `https://newsapi.org/v2/top-headlines?country=""""&apiKey=""""""""`
      );
      const data = await res.json();
      setNews(data);
      console.log("yes");
    } catch (error) {
      console.log(error);
    }
  };
  fetchData();
  const interval = setInterval(() => {
    fetchData();
  }, 36000000);

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

Answer 3

您可以尝试此代码：

const [news, setNews] = useState([]);
  const [timer, setTimer] = useState(null);

  const APIResponse = async (url) => {
    try {
      const response = await fetch(url);
      const data = await response.json();
      setNews(data);
    } catch (e) {
      console.error(e);
    }
  };

  useEffect(() => {
    APIResponse("https://newsapi.org/v2/top-headlines?country=""""&apiKey=""""""""");
    setTimer(
      setInterval(async () => {
        APIResponse("https://newsapi.org/v2/top-headlines?country=""""&apiKey=""""""""");
      }, 5000)
    );
    return () => clearInterval(timer);
  }, []);