reactjs-axios-请求如何改进

如何解决reactjs-axios-请求如何改进

我的请求处于反应状态。两者的目的几乎相同。我当时在想分页，但是这个问题使我感到困惑。关于分别加载两个请求

  // 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();
     },[]);

出于相同的目的，这里是否存在两次相同的代码的解决方案？

解决方法

可能是

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);
  }
}

,

我倾向于将获取过程（获取结果）纳入其自己的异步函数中。然后，您可以使用该功能在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))
},[]);