Vue中使用OpenAPI typescript-axios函数式接口的疑问：为何需两次then？

你观察得很准，函数式接口的返回逻辑确实和另外两种不同——它返回的是一个能生成AxiosPromise的函数，而非直接返回Promise，这就是为什么需要两次then的原因。下面拆解这种设计的意图、好处和适用场景：

核心设计逻辑 #

函数式接口的每个方法（比如productGet）并不会立刻发起HTTP请求，而是先返回一个"请求构建函数"。这个函数被调用时，才会真正执行请求并返回Promise。所以你的代码里，第一次then拿到的是这个构建函数，第二次调用它才会触发请求。

为什么要这么设计？ #

1. 延迟执行请求 #

如果需要把请求逻辑和触发时机分离（比如用户点击按钮、满足某个条件时才发起请求），这种模式会很有用。比如：

// 提前构建请求函数，不立刻发请求
const fetchProducts = await ProductControllerApiFp().productGet();

// 用户点击按钮时才触发请求
button.addEventListener('click', async () => {
  const res = await fetchProducts();
  console.log(res.data);
});

2. 预配置与参数复用 #

你可以提前绑定自定义的Axios实例、请求头、拦截器等配置，生成一个预配置的请求函数，后续重复调用时无需再传入这些配置：

// 用自定义Axios实例初始化函数式API
const productApiFp = ProductControllerApiFp({
  basePath: '/api/v2',
  axios: customAxiosInstance
});

// 预构建带配置的请求函数
const fetchV2Products = await productApiFp.productGet();

// 后续直接调用，复用之前的配置
fetchV2Products().then(res => console.log(res.data));

3. 适配函数式编程范式 #

这种设计天生适合函数式组合，比如和pipe、compose等工具结合，把请求逻辑和数据处理逻辑串联起来：

import { pipe } from 'ramda';

const processProducts = pipe(
  () => ProductControllerApiFp().productGet(),
  async (fetchFn) => fetchFn(),
  (res) => res.data.map(item => ({ ...item, price: item.price * 1.1 }))
);

// 执行整个流程
processProducts().then(processedData => console.log(processedData));

简化样板代码的小技巧 #

如果你觉得两次then太繁琐，可以用async/await简化：

onMounted(async () => {
  const fetchFn = await ProductControllerApiFp().productGet();
  const res = await fetchFn();
  console.log('Functional', res.data);
});

或者用链式调用合并：

ProductControllerApiFp().productGet().then(fn => fn()).then(res => console.log('Functional', res.data));

总结 #

这种函数式接口并非为了增加冗余代码，而是为了满足延迟执行、配置复用、函数式组合这类特定场景。如果你的业务逻辑不需要这些特性，直接使用工厂接口或面向对象接口就足够了——选择最适配自己业务的实现方式即可。

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