如何拦截所有TRPC请求？寻求类似Axios的拦截实现方案

TRPC v9 Vanilla里没有像Axios那样直接的interceptors API，但可以通过**自定义链路（Link）**实现完全相同的请求/响应拦截逻辑——这是TRPC处理请求流转的核心机制，和Axios拦截器的思路本质一致。

核心实现思路 #

TRPC的请求会依次经过你配置的各个链路节点，我们可以在链路上插入自定义逻辑，实现：

• 请求发送前的前置处理（比如埋点分析、参数校验、临时权限校验）
• 响应返回后的后置处理（比如统一错误处理、数据格式化）
• 甚至可以中断请求、修改请求参数/响应数据

具体代码示例 #

1. 编写自定义拦截链路

import { TRPCLink } from '@trpc/client';
import type { AnyRouter } from '@trpc/server';

// 创建请求拦截链路
const analyticsLink: TRPCLink<AnyRouter> = () => {
  return ({ next, op }) => {
    // --- 请求前置拦截逻辑 ---
    // 比如记录请求开始时间、上报请求信息
    const startTime = Date.now();
    console.log(`[TRPC 请求拦截] 发起请求: ${op.type} - ${op.path}`);
    
    // 可在这里修改请求参数
    // op.input = { ...op.input, extraParam: 'xxx' };

    // 继续执行下一个链路节点
    return next(op).then((res) => {
      // --- 响应后置拦截逻辑 ---
      const duration = Date.now() - startTime;
      console.log(`[TRPC 响应拦截] 请求完成: ${op.path}，耗时 ${duration}ms`);

      // 处理响应数据或错误
      if (res.error) {
        console.error(`[TRPC 错误拦截] 请求失败: ${op.path}，错误信息: ${res.error.message}`);
        // 可在这里统一处理错误，比如弹出提示、上报错误监控
      } else {
        // 可格式化响应数据
        // res.data = formatData(res.data);
      }

      return res;
    });
  };
};

2. 将自定义链路集成到TRPC客户端

创建TRPC客户端时，把自定义链路加入到links数组中（顺序很重要，链路会按数组顺序执行）：

import { createTRPCClient, httpBatchLink } from '@trpc/client';
import type { AppRouter } from './server/router';

const client = createTRPCClient<AppRouter>({
  links: [
    // 先执行自定义拦截链路
    analyticsLink,
    // 再执行官方的HTTP链路（实际发送请求）
    httpBatchLink({
      url: '/api/trpc',
    }),
  ],
});

进阶用法：临时拦截/动态开关 #

如果需要临时启用/禁用拦截逻辑，可以给链路加个开关：

let enableAnalytics = true;

const analyticsLink: TRPCLink<AnyRouter> = () => {
  return ({ next, op }) => {
    if (!enableAnalytics) {
      // 跳过拦截，直接走下一个链路
      return next(op);
    }

    // 正常执行拦截逻辑...
  };
};

// 后续可通过修改enableAnalytics控制拦截是否生效

和Axios拦截器的对比 #

• Axios的request.interceptors.use对应TRPC链路中next(op)之前的逻辑
• Axios的response.interceptors.use对应TRPC链路中next(op).then()里的逻辑
• TRPC链路支持更灵活的请求流转控制（比如分支、中断），适合复杂场景

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