reactjs - axios - 请求如何改进

Question

我有这个请求处于反应状态。然后两者都做了几乎相同的目的。我正在考虑分页，但这个问题却让我感到困惑。关于分别加载两个请求

  // use effect loading hooks api responses
  useEffect(() => {
    const loadNews = async () => {
        try {
            const response = await api.get('science.json');

            const { results } = response.data;
           console.log(results);
           setScience(results);
          } catch (err) {
            // Handle Error Here
            console.error(err);
         }
         };

        loadNews();
     }, []);

  useEffect(() => {
    const loadNews = async () => {
        try {
            const response = await api.get('arts.json');

            const { results } = response.data;
           console.log(results);
           setTechnologies(results);
          } catch (err) {
            // Handle Error Here
            console.error(err);
         }
         };

        loadNews();
     }, []);

两者都是出于相同的目的，是否有任何解决方案不让此代码相同两次？

Answer 1

这可能是

useEffect(() => {
  loadNews("arts.json", setScience);
  loadNews("science.json", setTechnologies);
}, []);

const loadNews = async (url, callBack) => {
  try {
    const response = await api.get(url);
    const { results } = response.data;
    console.log(results);
    callBack(results);
  } catch (err) {
    // Handle Error Here
    console.error(err);
  }
}

Answer 2

我倾向于将获取过程（获取结果）放入它自己的异步函数中。然后，您可以使用该函数在 useEffect 中设置结果。

类似这样的：

async function fetchNews(jsonFile) {
    const response = await api.get(jsonFile);
    const { results } = response.data;
    return results;
}

useEffect(() => {
   fetchNews("science.json")
     .then(res => setScience(res))
     .catch(err => console.error(err))

   fetchNews("arts.json")
     .then(res => setTechnologies(res))
     .catch(err => console.error(err))
}, []);