如何在React项目所有页面中统一发起Axios请求获取推广图片？

可以通过全局布局组件封装推广图片逻辑的方式实现，不用在每个页面单独调用函数，具体步骤如下：

1. 封装全局推广图片组件 #

把请求逻辑和渲染逻辑封装成一个独立组件，比如CampaignBanner.js，内部处理路由变化时自动重新请求数据：

import axios from 'axios';
import { useEffect, useState } from 'react';
import { useLocation } from 'react-router-dom';

const CampaignBanner = () => {
  const [bannerData, setBannerData] = useState(null);
  const [error, setError] = useState(null);
  const location = useLocation();

  // 封装请求函数，每次路由变化时重新调用
  const fetchCampaignImage = async () => {
    try {
      const pathName = location.pathname;
      const res = await axios({
        method: 'get',
        url: `${process.env.REACT_APP_BASE_URL}campaignpopup${pathName}`,
        headers: {
          'Content-Type': 'application/json',
        },
      });
      setBannerData(res.data);
      setError(null);
    } catch (e) {
      setError(e);
      setBannerData(null);
      console.error('获取推广图片失败:', e);
    }
  };

  // 监听路由变化，重新请求数据
  useEffect(() => {
    fetchCampaignImage();
  }, [location.pathname]); // 依赖pathname，路由切换时触发

  if (error) return null; // 出错时不显示任何内容，或者自定义错误提示
  if (!bannerData) return null; // 无数据时不显示

  // 根据接口返回的数据渲染图片，这里假设res.data里有imageUrl字段
  return (
    <div className="campaign-banner">
      <img src={bannerData.imageUrl} alt="推广横幅" />
    </div>
  );
};

export default CampaignBanner;

2. 在全局布局中引入该组件 #

找到你的项目中最外层的布局组件（比如Layout.js或者直接在App.js的路由外层），把CampaignBanner组件放进去，这样所有通过路由渲染的页面都会自动加载这个横幅：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import CampaignBanner from './CampaignBanner';
import HomePage from './pages/HomePage';
import ProductPage from './pages/ProductPage';
// 其他页面组件...

function App() {
  return (
    <Router>
      {/* 全局推广横幅，所有页面顶部都会显示 */}
      <CampaignBanner />
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/products/:id" element={<ProductPage />} />
        {/* 其他路由配置... */}
      </Routes>
    </Router>
  );
}

export default App;

对原有函数的优化说明 #

• 原函数中path_name在组件外部定义，路由切换后不会更新，现在改用useLocation实时获取当前路径，确保路由变化时请求正确的接口
• 去掉了async/await和then/catch混用的写法，代码更简洁易读
• 用useState管理数据和错误状态，更符合React的状态管理规范

额外优化建议 #

• 可以给请求加上防抖，避免快速切换路由时频繁发起请求
• 如果接口返回的图片需要权限验证，可以在请求头中添加认证信息（比如token）
• 可以添加加载状态，在请求过程中显示骨架屏或者加载动画

内容的提问来源于stack exchange，提问作者Anonymous