本文讲解如何正确封装 axios.post 请求为可复用函数，核心在于**显式返回 promise 实例**，避免因遗漏 return 导致调用链中断和 `cannot read properties of undefined (reading 'then')` 错误。
在实际开发中，频繁重复编写相同的 axios POST 请求（尤其是 GraphQL 接口调用）不仅冗余，还易引发维护问题。将请求逻辑抽离为独立函数是常见且推荐的做法，但一个关键细节常被忽略：必须返回 axios 调用本身——它是一个 Promise。否则，函数默认返回 undefined，后续 .then() 就会报错。
✅ 正确封装方式：显式返回 Promise
const headers = {
'Content-Type': 'application/json',
'Authorization': 'Bearer your-token-here'
};
const graphqlRequest = (query, variables) => {
return axios.post(
'https://test.com/graphql',
{ query, variables },
{ headers }
);
};
// ✅ 可安全链式调用
graphqlRequest(myQuery, {
id: '12345',
nm: 'TEST'
})
.then(res => console.log(res.data.data))
.catch(err => console.error('请求失败:', err.response?.data || err.message));? 关键点：return axios.post(...) 是必需的。箭头函数若使用大括号 {} 语法，不会自动返回值，必须显式写 return；若改用简洁体（无大括号），可省略 return 关键字：// 等价写法（更简洁） const graphqlRequest = (query, variables) => axios.post('https://test.com/graphql', { query, variables }, { headers });
⚠️ 常见错误与排查
- ❌ 错误示例（无 return）：
const myFunc = (q, v) => { axios.post(...); // ← 没有 return！函数返回 undefined }; myFunc(...).then(...); // TypeError: Cannot read property 'then' of undefined - ❌ 忘记处理异步错误：未添加 .catch() 可能导致未捕获异常中断流程；
- ❌ 硬编码 URL/headers：建议将 endpoint、公共 headers 抽取为配置常量，便于环境切换与统一管理。
✅ 进阶建议：增强复用性与健壮性
可进一步封装为支持通用配置的工厂函数：
const createGraphqlClient = (baseUrl, defaultHeaders = {}) => (query, variables, options = {}) =>
axios.post(
baseUrl,
{ query, variables },
{
headers: { ...defaultHeaders, ...options.headers },
...options
}
);
// 使用
const api = createGraphqlClient('https://test.com/graphql', headers);
api(myQuery, { id: '12345' })
.then(({ data }) => data.data)
.catch(console.error);这样既保持了单一职责，又提升了灵活性与可测试性。
总结：封装 axios 请求的本质是封装 Promise。只要确保函数返回 Promise 实例，即可自由链式调用 .then()、.catch() 或 await，实现真正可复用、可维护的请求逻辑。
