封装可复用axios POST函数触发TypeError错误，求解决方案

错误原因 #

你编写的myFunc函数没有返回axios.post调用生成的Promise对象。axios.post本身会返回一个Promise，但你的函数仅执行了这个请求却未将其返回，导致调用myFunc()后得到的是undefined，自然无法调用.then()方法，触发了类型错误。

修复代码 #

只需在myFunc中添加return关键字，返回axios.post的执行结果即可：

const myFunc = (query, variables) => {
  // 关键：返回axios.post返回的Promise
  return axios.post(
    "https://test.com/graphql",
    {
      query, // 利用对象简写语法简化代码
      variables,
    },
    {
      headers: headers,
    }
  );
};

// 调用方式保持不变，现在可正常链式调用then
myFunc(myQuery, {
  id: "12345",
  nm: "TEST",
}).then((res) => console.log(res.data.data));

可选优化建议 #

• 统一错误处理：可以在封装函数内添加全局错误捕获，同时保留调用方自定义处理的能力：

const myFunc = (query, variables) => {
  return axios.post(
    "https://test.com/graphql",
    { query, variables },
    { headers }
  ).catch(err => {
    // 全局统一打印错误日志
    console.error('GraphQL请求失败:', err);
    // 抛出错误，让调用方仍能捕获并自定义处理
    throw err;
  });
};

// 调用时可添加自定义错误处理
myFunc(myQuery, { id: "12345", nm: "TEST" })
  .then((res) => console.log(res.data.data))
  .catch(err => {
    // 这里写当前场景的错误逻辑
  });

• 全局配置axios实例：如果headers是固定全局配置，可以提前创建axios实例，避免每次请求重复传入：

// 提前创建配置好headers的axios实例
const apiClient = axios.create({
  baseURL: "https://test.com",
  headers: headers
});

const myFunc = (query, variables) => {
  return apiClient.post('/graphql', { query, variables });
};

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