Axios重复请求问题：代码触发两次相同响应的原因及修复方法

先看你提供的代码：

function Homepage() {
    const url = `https://cloud.iexapis.com/stable/stock/aapl/quote?token=token`;
    useEffect(()=>{
        axios.get(url)
        .then(res => {
            console.log(res.data);
        })
        .catch(err => {
            console.log(err);
        })
    }, [])
}

原因分析 #

最常见的触发两次请求的原因是**React 18的严格模式（Strict Mode）**在开发环境下的特殊行为：

• React 18为了帮开发者提前排查组件的潜在问题（比如未清理的副作用、内存泄漏），会在开发环境中自动执行两次useEffect（哪怕是带空依赖数组的useEffect），直接导致你的API请求被触发两次。
• 这种双重执行的逻辑只在开发环境生效，生产环境不会出现该现象。

解决方法 #

方法1：开发环境临时关闭Strict Mode（快速验证用，不推荐长期关闭）

找到项目入口文件（一般是index.js或main.jsx），移除包裹根组件的<StrictMode>标签：

// 修改前
root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

// 修改后
root.render(
  <App />
);

注意：不建议长期关闭Strict Mode，它能帮你提前发现很多生产环境可能暴露的问题。

方法2：添加请求取消逻辑（推荐，符合React最佳实践）

使用AbortController终止重复请求，确保即使useEffect被执行两次，第二次请求会被取消，不会输出重复响应：

function Homepage() {
    const url = `https://cloud.iexapis.com/stable/stock/aapl/quote?token=token`;
    useEffect(()=>{
        const controller = new AbortController();
        const signal = controller.signal;

        axios.get(url, { signal })
        .then(res => {
            console.log(res.data);
        })
        .catch(err => {
            // 跳过请求被取消的错误日志
            if (err.name !== 'CanceledError') {
                console.log(err);
            }
        })

        // 清理函数：组件卸载或useEffect重新执行时取消请求
        return () => controller.abort();
    }, [])
}

方法3：部署到生产环境

当你将项目打包部署到生产环境后，React会自动关闭Strict Mode的双重执行逻辑，API请求只会触发一次。

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