Vue Hooks Plus 中插件与格式化结果的交互设计探讨

在 Vue Hooks Plus 项目中，一个值得关注的技术讨论围绕着插件如何与格式化结果(formatResult)交互展开。这个问题揭示了前端数据流处理中的一个重要设计考量。

核心问题

在典型的 API 请求场景中，后端通常会返回固定格式的数据结构，例如包含 code、data 和 message 字段的标准响应格式。前端开发者面临一个两难选择：

1. 如果不使用 formatResult，开发者需要反复通过 data.value.data 访问业务数据
2. 如果使用 formatResult，插件又无法获取原始的完整响应数据

这种矛盾在需要基于完整响应数据(如 code 和 message)实现通用逻辑(如错误提示)的插件中尤为明显。

技术背景

Vue Hooks Plus 的插件系统允许开发者扩展 useRequest 的功能。插件通过以下接口定义：

interface UseRequestPlugin<TData, TParams, TPlugin> {
  (fetchInstance: UseRequestFetch<TData, TParams>, options: UseRequestOptions<TData, TParams, TPlugin>): UseRequestPluginReturn<TData, TParams>;
  onInit?: (options: UseRequestOptions<TData, TParams, TPlugin>) => Partial<UseRequestFetchState<TData, TParams>>;
}

关键问题在于，formatResult 作为最高优先级的处理环节，会影响所有后续流程中的数据，包括插件接收到的值。

解决方案演进

项目团队经过讨论后，提出了几个解决方案方向：

1. 拦截器方案：在请求拦截器中处理标准响应格式，但这缺乏灵活性，难以针对特定接口定制行为

2. 上下文机制：引入 context 和 snapshot 机制，允许插件获取请求的原始数据和格式化后的数据

最终实现采用了更完善的方案，在参数中添加了 origin 字段，使插件能够在 onSuccess 等生命周期中同时访问原始数据和格式化后的数据。

技术实现细节

在 2.3.0-beta.6 版本中，团队增强了插件的上下文感知能力。现在插件可以这样使用：

const useFormatterPlugin: UseRequestPlugin<any, [], { formatter?: any }> = 
  (fetchInstance, { pluginOptions }, context) => {
    return {
      name: 'formatterPlugin',
      onSuccess: (data, params, origin) => {
        // 可以同时访问格式化后的data和原始origin数据
        const snapshot = fetchInstance.getSnapshot();
        // 业务逻辑处理
      },
    };
  };

这种设计既保留了 formatResult 的核心功能，又为插件提供了完整的数据访问能力，解决了类型约束和实际使用之间的矛盾。

设计思考

这一改进体现了几个重要的设计原则：

1. 关注点分离：将数据转换逻辑与业务逻辑分离，保持插件的纯粹性
2. 灵活性：允许插件开发者根据需要选择使用原始数据或格式化数据
3. 类型安全：维护了 TypeScript 类型系统的完整性，避免 any 类型的滥用

这种设计对于构建可维护、可扩展的请求处理系统具有重要意义，特别是在需要处理标准化API响应和多样化业务逻辑的复杂应用中。