如何封装可复用的Axios Post函数？解决引用错误问题

错误原因 #

1. test函数未返回Axios请求的Promise对象，导致await test(query)得到undefined，后续访问result.data触发错误（你看到的ReferenceError大概率是代码逻辑导致的连锁问题，核心是test无返回值）。
2. myFunc中的try/catch范围错误，没有包裹请求逻辑，无法捕获Axios请求的异常。

修正后的完整代码 #

// 可复用的Axios POST函数：固定配置，仅接收动态data参数
const test = (requestData) => {
  // 返回Axios请求的Promise，让await能拿到响应结果
  return axios({
    url: process.env.ENDPOINT,
    method: "post",
    headers: headers, // 若headers非全局，建议改为参数传入或内部定义
    data: requestData,
  });
};

// 业务逻辑函数：调用复用的请求函数并处理结果
const myFunc = async (query) => {
  try {
    const response = await test(query);
    const resultData = response.data;
    console.log(JSON.stringify(resultData, null, 4));
    // 返回结果给上层调用方
    return resultData;
  } catch (error) {
    // 更友好的错误打印，优先输出接口返回的错误信息
    console.error("请求失败:", error.response?.data || error.message);
    // 抛出错误让上层处理，或返回默认值
    throw error;
  }
};

// 示例调用函数
const finalFunc = async () => {
  const queryData = { query: `query... ` };
  try {
    await myFunc(queryData);
  } catch (err) {
    console.error("执行出错:", err);
  }
};

finalFunc();

关键优化点 #

• 复用性实现：把固定的请求配置（URL、POST方法、headers）抽离到test函数，仅将动态的data作为参数传入，后续其他业务场景只需调用test并传入对应data即可。
• 错误处理完善：将await逻辑放入try块，确保请求异常能被捕获；同时优化错误信息输出，方便排查问题。
• Promise返回规范：test函数必须返回Axios请求的Promise，否则await无法获取有效响应数据。

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