如何修复Axios请求专用类返回undefined且无网络请求的问题

直接修复现有代码 #

1. 修正Requests.js的核心问题 #

你的baseGetRequest方法有两个致命问题：

• 内部异步函数getRequest被调用后，没有返回其执行结果
• 外层的baseGetRequest本身没有任何返回值，导致调用时直接得到undefined

修改后的Requests.js：

import Axios from "./Axios";

export default class Requests {
    static async baseGetRequest(endpoint) {
        try {
            const get_response = await Axios.get(`${window.ipAddress.ip}/${endpoint}`);
            return get_response;
        } catch (err) {
            // 替换简单的console.log，做更规范的错误记录
            console.error('GET请求失败:', err);
            // 抛出错误让调用方可以捕获处理，而不是吞掉
            throw err;
        }
    }
}

2. 修正组件中的调用逻辑 #

因为baseGetRequest是异步函数，直接console.log只会打印Promise对象，需要用async/await处理异步结果：

useEffect(() => {
    const fetchData = async () => {
        if (loadUncompleted) {
            try {
                const response = await Requests.baseGetRequest("Updates");
                console.log('请求成功:', response);
                // 恢复原来的状态更新逻辑
                setParentToChildData(response.data);
            } catch (err) {
                // 这里可以根据需求添加用户提示，比如设置错误状态
                console.error('请求处理失败:', err);
            }
        }
    };

    fetchData();
}, [loadUncompleted]);

更简洁的实现方案：纯函数封装 #

如果不需要类的结构，用纯函数封装API请求会更轻量易维护，同时保留统一管理的优势：

新建api.js封装请求 #

import Axios from "./Axios";

// 把基础地址抽出来，后续修改更方便
const BASE_URL = window.ipAddress.ip;

// GET请求封装，直接返回响应数据
export const getRequest = async (endpoint) => {
    try {
        const response = await Axios.get(`${BASE_URL}/${endpoint}`);
        return response.data;
    } catch (err) {
        // 格式化错误信息，方便定位问题
        const errorMsg = `请求${endpoint}失败: ${err.response?.data?.message || err.message}`;
        console.error(errorMsg);
        // 抛出自定义错误，让调用方可以针对性处理
        throw new Error(errorMsg);
    }
};

// 可扩展其他请求方法，比如POST
export const postRequest = async (endpoint, data) => {
    try {
        const response = await Axios.post(`${BASE_URL}/${endpoint}`, data);
        return response.data;
    } catch (err) {
        const errorMsg = `提交${endpoint}失败: ${err.response?.data?.message || err.message}`;
        console.error(errorMsg);
        throw new Error(errorMsg);
    }
};

组件中调用封装好的方法 #

import { getRequest } from './api';

useEffect(() => {
    const fetchData = async () => {
        if (loadUncompleted) {
            try {
                const data = await getRequest("Updates");
                setParentToChildData(data);
            } catch (err) {
                // 这里可以添加UI层面的错误提示，比如设置错误状态展示给用户
                // setError(err.message);
            }
        }
    };

    fetchData();
}, [loadUncompleted]);

额外优化建议 #

• 把BASE_URL移到单独的配置文件中，避免直接依赖window对象，方便环境切换（开发/生产）
• 给Axios添加全局拦截器，统一处理请求头（比如token）、响应状态码、全局错误提示
• 对频繁触发的请求添加防抖/节流，避免重复发起相同请求

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