> 立场先明：`tRPC procedures` 是在 `TypeScript` 世界里用函数来定义后端端点的一套类型安全抽象；`Angular HttpInterceptor` 则是 `HttpClient` 的请求-响应管线中的中间件机制。两者都叫“中间层”，却作用在完全不同的层级：`tRPC` 面向 `API` 端点的定义与调用链，`HttpInterceptor` 面向 `HTTP` 报文的拦截与编排。理解这一点，再去比较相似与差异，思路会很清晰。

---

## 1. 概念总览：什么是 tRPC procedures

在 `tRPC` 中，`procedure` 是暴露给客户端可调用的后端函数，按语义分为 `Query`、`Mutation`、`Subscription` 三类。`Query` 取数、`Mutation` 改数、`Subscription` 通过长连接监听变化。`tRPC` 官方文档把 `procedure` 明确描述为后端的 `API endpoint` 级别原语，并强调以不可变 `builder` 的方式组合中间件、校验器等通用能力。([trpc.io][1])

`tRPC procedures` 的一个关键特征是类型安全：服务端对 `input`、`output` 的模式校验会被用于类型推断，客户端在调用时即可获得静态类型提示，而无需代码生成或 `OpenAPI`。([trpc.io][2])

此外，`tRPC` 允许在 `procedure` 外围串接中间件，用于认证、日志、上下文扩展等，且中间件执行顺序会影响上下文拼接与权限判断。([trpc.io][3])

---

## 2. 概念总览：什么是 Angular HttpInterceptor

在 `Angular` 中，`HttpInterceptor` 是 `HttpClient` 的中间件。它处在 `HttpClient` 与底层 `HttpBackend` 之间，拦截并处理每一次请求与响应事件流；常见用法包含重试、缓存、日志和认证等通用逻辑。自 `Angular 15+` 起还引入了函数式拦截器，配置更轻，更易于明确顺序。([Angular][4])

`HttpInterceptor` 对请求和响应都是 `RxJS` 流式处理，可以直接在 `next.handle()` 返回的可观察流上拼接操作符，也可以借助 `HttpContext` 传递元数据给下游拦截器。([Angular][5])

---

## 3. 观察视角：两条典型的调用链

* `tRPC` 视角：前端调用 `procedure` → 进入路由与中间件链 → 命中 `resolver` 执行业务 → 结果通过 `link` 返回（`HTTP` 批量或 `WebSocket`）。`Subscription` 的场景会建立持久连接。([trpc.io][6])
* `Angular HttpClient` 视角：组件或服务调用 `HttpClient` → 穿过已注册的拦截器链（可多级）→ 到达 `HttpBackend` 发出 `HTTP` 请求 → 响应沿同一链回传，流经各级拦截器的 `RxJS` 操作。([Angular][5])

两者都提供“可组合的中间层”，但 `tRPC` 的中间层围绕 `procedure` 与 `Context`，而 `HttpInterceptor` 围绕 `HTTP` 报文与 `RxJS` 流。

---

## 4. 相似之处：为什么两者经常被拿来类比

* **中间件管线**：`tRPC` 的 `middlewares` 与 `Angular` 的拦截器都采用管线式组合，可在统一入口施加认证、审计、埋点、限流等策略，减少重复样板代码。([trpc.io][3])
* **顺序敏感**：两边都强调链路顺序的重要性；顺序不同，`ctx` 合并与报文变形的结果会不同。`tRPC` 文档直接给出顺序错误导致上下文不匹配的示例，`Angular` 在新版文档中也建议用函数式配置以获得更可控的顺序语义。([trpc.io][3])
* **可复用与分层组织**：`tRPC` 通过基础 `procedure` 与路由嵌套抽取共性，`Angular` 拦截器可模块化注册并跨项目复用。([trpc.io][7])

---

## 5. 本质差异：边界、抽象层、协议与类型系统

**抽象层级不同**
`tRPC procedures` 是后端 `API` 本身的类型安全抽象，直接以 `TypeScript` 函数承载 `业务语义`；而 `HttpInterceptor` 操作的是传输层的 `HTTP` 报文与事件流。前者讨论 `input/output schema`、`Context`、`Router`；后者讨论 `HttpRequest/HttpResponse`、`headers`、`status code` 与 `RxJS` 事件。([trpc.io][2])

**协议与连接模型不同**
`tRPC` 支持 `Query/Mutation` 的 `HTTP` 批量链路，也支持通过 `WebSocket` 的 `Subscription` 流；`HttpInterceptor` 则专注于 `HTTP` 请求-响应模型，对 `WebSocket` 并不介入。([trpc.io][1])

**类型安全位置不同**
`tRPC` 把 `zod` 等模式校验器挂在 `procedure` 上，形成端到端类型推断；`HttpInterceptor` 不关心服务端 `schema`，只处理 `HttpClient` 层的 `TypeScript` 泛型提示以及 `RxJS` 流。([trpc.io][2])

**可见性与可调用方式不同**
`tRPC procedure` 通过 `createCaller` 在服务端内部调用，或通过客户端 `link` 在前端调用；`HttpInterceptor` 不提供“可直接调用的业务入口”，而是透明地环绕 `HttpClient`。([trpc.io][8])

**生态集成点不同**
`Angular` 的拦截器利用 `RxJS` 操作符对事件流变形；`tRPC` 的中间件以函数式 `pipe` 与不可变构建器叠加 `ctx` 与校验，语义更贴近 `API` 领域。([trpc.io][7])

---

## 6. 设计取舍：为什么在 `Angular` 项目里选用 tRPC 或继续用传统 `REST + HttpInterceptor`

* 若团队强依赖 `TypeScript` 的端到端类型闭环，希望在编译期就对 `API` 调用进行约束与自动补全，`tRPC` 的价值非常直接。([Create T3 App][9])
* 若已有稳定的 `REST` 网关、成熟的 `HTTP` 中间件与缓存体系，且拦截器中的链路治理（鉴权、熔断、重试、监控）已建成，那么继续围绕 `HttpInterceptor` 迭代成本更低。([Angular][4])
* 两者并非对立：可以在同一 `Angular` 应用里，同时用 `HttpClient` 访问既有 `REST`，并用 `tRPC client` 访问新建的类型安全 `API`。差异仅在于 `HttpInterceptor` 不会拦到 `tRPC` 自己的 `fetch`，需要在 `tRPC` 的 `link` 里统一加头或自定义 `fetch`。([Angular][5])

---

## 7. 可运行示例一：最小可用的 tRPC 服务端与前端调用

> 目标：启动一个简易 `tRPC` `Express` 服务，包含认证中间件、输入校验与 `Query/Mutation`；随后用一个纯 `TypeScript` 客户端调用；再演示如何在 `Angular` 中以 `Observable` 包装 `tRPC` 调用。

### 7.1 服务端：`server.ts`

```ts
// 安装：pnpm add @trpc/server @trpc/server/adapters/express zod express
import express from 'express';
import { initTRPC } from '@trpc/server';
import { z } from 'zod';
import * as trpcExpress from '@trpc/server/adapters/express';

// 定义 Context：从请求头取出 token
type Context = { userId?: string };
const createContext = ({ req }: trpcExpress.CreateExpressContextOptions): Context => {
  const token = req.headers?.authorization?.replace(/^Bearer\s+/i, '');
  // 演示：把一个固定 token 解析成 userId
  return token === 'demo-token' ? { userId: 'u_123' } : {};
};

// 初始化 tRPC
const t = initTRPC.context<Context>().create();

// 认证中间件
const isAuthed = t.middleware(({ ctx, next }) => {
  if (!ctx.userId) {
    throw new Error('UNAUTHORIZED');
  }
  return next({ ctx: { userId: ctx.userId } });
});

// 可复用基础 procedure
const publicProcedure = t.procedure;
const authedProcedure = t.procedure.use(isAuthed);

// 路由与 procedures
const appRouter = t.router({
  hello: publicProcedure
    .input(z.object({ name: z.string().min(1) }))
    .query(({ input }) => {
      return { message: `hello, ${input.name}` };
    }),
  addTodo: authedProcedure
    .input(z.object({ title: z.string().min(1) }))
    .mutation(({ input, ctx }) => {
      // 模拟数据库写入
      return { id: 'todo_1', owner: ctx.userId, title: input.title };
    }),
});

// 导出路由类型给客户端使用
export type AppRouter = typeof appRouter;

// 搭配 Express 适配器启动
const app = express();
app.use(
  '/trpc',
  trpcExpress.createExpressMiddleware({
    router: appRouter,
    createContext,
  }),
);

app.listen(3000, () => {
  console.log('tRPC server on http://localhost:3000/trpc');
});
```

`procedure` 的三类与中间件拼接、`zod` 输入校验、`Context` 携带用户信息，均是 `tRPC` 的核心使用方式，与官方文档一致。([trpc.io][1])

### 7.2 纯 `TypeScript` 客户端：`client.ts`

```ts
// 安装：pnpm add @trpc/client @trpc/server zod
import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';
import type { AppRouter } from './server';

const client = createTRPCProxyClient<AppRouter>({
  links: [
    httpBatchLink({
      url: 'http://localhost:3000/trpc',
      headers() {
        return { authorization: `Bearer demo-token` };
      },
    }),
  ],
});

async function main() {
  const r1 = await client.hello.query({ name: 'Jerry' });
  console.log('hello =>', r1);

  const r2 = await client.addTodo.mutate({ title: 'learn tRPC' });
  console.log('addTodo =>', r2);
}

main().catch(console.error);
```

`httpBatchLink` 会把多个调用合并为一批 `HTTP` 请求，减少往返次数，这属于 `tRPC` 客户端的标准能力。([trpc.io][10])

### 7.3 在 `Angular` 中以 `Observable` 包装 `tRPC` 调用（`data.service.ts`）

```ts
// 安装：pnpm add @trpc/client
import { Injectable, inject } from '@angular/core';
import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';
import { from, Observable } from 'rxjs';
import type { AppRouter } from '../../../server'; // 路径按你的项目结构调整
import { TokenService } from './token.service';

@Injectable({ providedIn: 'root' })
export class DataService {
  private tokenService = inject(TokenService);

  private client = createTRPCProxyClient<AppRouter>({
    links: [
      httpBatchLink({
        url: 'http://localhost:3000/trpc',
        headers: () => ({
          authorization: `Bearer ${this.tokenService.getToken()}`,
        }),
      }),
    ],
  });

  hello(name: string): Observable<{ message: string }> {
    return from(this.client.hello.query({ name }));
  }

  addTodo(title: string): Observable<{ id: string; owner?: string; title: string }> {
    return from(this.client.addTodo.mutate({ title }));
  }
}
```

> 这里把 `tRPC` 的 `Promise` 包装成 `Observable`，以便在 `Angular` 模板与 `RxJS` 管线中使用；这类包装不会让 `Angular HttpInterceptor` 生效，因为 `tRPC` 客户端使用的是它自己的 `fetch/link` 管线。([Angular][5])

---

## 8. 可运行示例二：Angular HttpInterceptor（函数式）实现认证与日志

> 目标：展示 `Angular 15+` 的函数式拦截器，示例中按 `HttpContext` 元数据决定是否加 `Authorization` 头，并在响应阶段记录耗时。

### 8.1 拦截器与上下文键

```ts
// app/http.context.ts
import { HttpContextToken } from '@angular/common/http';

// 控制是否自动加 token
export const CTX_AUTH = new HttpContextToken<boolean>(() => true);
```

```ts
// app/interceptors.ts
import { HttpInterceptorFn } from '@angular/common/http';
import { inject } from '@angular/core';
import { TokenService } from './token.service';
import { tap } from 'rxjs/operators';

export const authAndLogInterceptor: HttpInterceptorFn = (req, next) => {
  const tokenService = inject(TokenService);
  const start = performance.now();

  let nextReq = req;
  const needAuth = req.context.get(CTX_AUTH);
  if (needAuth) {
    nextReq = req.clone({
      setHeaders: { Authorization: `Bearer ${tokenService.getToken()}` },
    });
  }

  return next(nextReq).pipe(
    tap({
      next: () => {
        const cost = performance.now() - start;
        console.log(`[HTTP] ${req.method} ${req.url} cost=${cost.toFixed(1)}ms`);
      },
      error: (err) => {
        const cost = performance.now() - start;
        console.error(`[HTTP] ${req.method} ${req.url} failed in ${cost.toFixed(1)}ms`, err);
      },
    }),
  );
};
```

```ts
// app/app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { authAndLogInterceptor } from './interceptors';

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(
      withInterceptors([authAndLogInterceptor]) // 函数式拦截器，顺序即数组顺序
    ),
  ],
};
```

```ts
// 使用：可通过 HttpContext 开关 token 注入
import { HttpClient, HttpContext } from '@angular/common/http';
import { CTX_AUTH } from './http.context';

constructor(private http: HttpClient) {}

callPublicApi() {
  return this.http.get(`/public/health`, {
    context: new HttpContext().set(CTX_AUTH, false),
  });
}
```

函数式拦截器是新版推荐的配置方式，`HttpContext` 允许把每次请求的元数据传给拦截器，二者都由官方文档明确说明。([Angular][11])

---

## 9. 进阶协同：如何在 Angular 工程里统一 `tRPC` 与 `HTTP` 的跨域与认证策略

`Angular HttpInterceptor` 对 `tRPC` 客户端并不生效，因此需要在 `tRPC link` 层做统一处理，例如：自定义 `fetch`，在每次调用时注入公共头、统一携带 `csrf` 或 `tenant-id`。同时，`HttpClient` 的 `REST` 请求仍通过拦截器处理，这样可以在一个工程内同时演进两条栈。

一个简单的统一化做法如下：

```ts
import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';

function makeTrpcClient(getToken: () => string) {
  return createTRPCProxyClient<AppRouter>({
    links: [
      httpBatchLink({
        url: 'http://localhost:3000/trpc',
        fetch(url, opts) {
          const headers = new Headers(opts?.headers || {});
          headers.set('X-Tenant-Id', 'tenant_001');
          // 若无 Authorization 则补齐
          if (!headers.has('authorization')) {
            headers.set('authorization', `Bearer ${getToken()}`);
          }
          return fetch(url, { ...opts, headers });
        },
      }),
    ],
  });
}
```

这样即可把认证、租户、追踪等与 `tRPC` 调用绑定在一起；而对 `REST` 路径继续用 `HttpInterceptor` 做相同策略，两边的配置形态保持一致，心智负担较低。关于 `tRPC` 端的中间件顺序与上下文合并细节，可参见文档警示示例。([trpc.io][3])

---

## 10. 更细致的对比清单

| 维度      | tRPC procedures                  | Angular HttpInterceptor                 |
| ------- | -------------------------------- | --------------------------------------- |
| 定位      | 面向 `API endpoint` 的类型安全函数        | 面向 `HTTP` 报文的拦截中间件                      |
| 抽象层     | 业务语义层（`resolver`、`router`、`ctx`） | 传输语义层（`HttpRequest/HttpResponse`、头、状态码） |
| 中间件     | `t.procedure.use(mw)` 串接，顺序敏感    | `withInterceptors([...])` 串接，顺序按注册决定    |
| 输入校验    | `zod` 等模式校验直接挂在 `procedure`      | 不关心服务端 `schema`，仅在客户端泛型层面约束             |
| 类型传递    | 端到端类型推断，无代码生成                    | 仅限 `HttpClient<T>` 的本地类型提示              |
| 连接形态    | `HTTP` 批量、`WebSocket` 订阅         | 仅 `HTTP` 请求-响应流                         |
| 服务端内部调用 | `createCaller` 直接以函数方式调用         | 不适用                                     |
| 常见用途    | 统一鉴权、上下文透传、领域校验、微服务边界内聚          | 鉴权头注入、重试、节流、熔断、埋点、`RxJS` 级别缓存           |

相关条目均可在官方文档中找到依据与描述。([trpc.io][1])

---

## 11. 真实世界的小场景示例

**场景一：表单提交流程**
电商后台的 `商品新增` 表单需要前端校验与后端校验双保险。用 `tRPC`，把 `Mutation` 的 `input` 挂上 `zod` 校验，例如价格为正数、标题长度最少 5 个字符；服务端校验失败，错误对象带类型信息，前端调用处会有静态提示。提交成功后回写 `id` 与 `owner`。这类校验属于领域语义，放在 `procedure` 最贴切。([trpc.io][2])

**场景二：统一注入 `Authorization`**
项目既有 `REST` 与新写的 `tRPC` 并存：

* 对 `REST`：通过 `HttpInterceptor` 注入 `Authorization`，失败时根据 `status` 统一跳登录。([Angular][5])
* 对 `tRPC`：在 `httpBatchLink` 的 `headers()` 或自定义 `fetch` 里注入同名头，必要时把 `401` 翻译为领域错误码。([trpc.io][10])

**场景三：列表页数据更新广播**
运营后台的看板需要在多用户协作时自动刷新：

* `tRPC` 提供 `Subscription`，通过 `WebSocket` 推送增量事件，前端基于 `RxJS` 把事件流映射为视图状态。([trpc.io][6])
* `HttpInterceptor` 不参与 `WebSocket`，只作用在其他 `REST` 辅助请求上（如下载导出任务的进度轮询）。

---

## 12. 小结与落地建议

* 当你在 `Angular` 里强调端到端类型收敛、减少文档-代码-调用三方错配之类的问题，`tRPC procedures` 值得优先采用；如果项目里仍有大量 `REST`，继续发挥 `HttpInterceptor` 的拦截与治理优势即可。([Create T3 App][9])
* 在同一应用内并行两条调用栈是可行的：`tRPC` 负责新域模型，`HttpClient` 维护旧系统；通过 `link` 自定义与拦截器配置把认证与追踪对齐。顺序依赖要写在最显眼的地方，避免中间件前后颠倒导致 `ctx` 或请求变形错误。([trpc.io][3])

---

## 13. 附：Angular 端最小演示组件

```ts
import { Component, inject } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <button (click)="onHello()">call tRPC hello</button>
    <pre>{{ msg }}</pre>
  `,
})
export class AppComponent {
  private data = inject(DataService);
  msg = '';

  onHello() {
    this.data.hello('Jerry').subscribe({
      next: (r) => (this.msg = r.message),
      error: (e) => (this.msg = `error: ${e?.message || e}`),
    });
  }
}
```

---

## 参考文献（部分关键论据）

* `tRPC` 定义、`Query/Mutation/Subscription`、`procedures` 与 `router`：([trpc.io][1])
* `tRPC` 类型安全与输入输出校验、生态特征：([trpc.io][2])
* `tRPC` 中间件顺序与 `Context` 合并注意点：([trpc.io][3])
* `Angular HttpInterceptor` 定义、`RxJS` 流、函数式拦截器与顺序建议：([Angular][4])
* `HttpContext` 传递元数据：([Angular][12])
* `tRPC` 服务端内部调用 `createCaller`：([trpc.io][8])

---

**小结标题**
`用函数定义 API，用拦截器治理 HTTP：tRPC procedures 与 Angular HttpInterceptor 的各司其职`

[1]: https://trpc.io/docs/server/procedures?utm_source=chatgpt.com "Define Procedures"
[2]: https://trpc.io/docs/server/introduction?utm_source=chatgpt.com "tRPC server documentation"
[3]: https://trpc.io/docs/server/middlewares?utm_source=chatgpt.com "Middlewares"
[4]: https://angular.dev/guide/http/interceptors?utm_source=chatgpt.com "Intercepting requests and responses"
[5]: https://angular.dev/api/common/http/HttpInterceptor?utm_source=chatgpt.com "HttpInterceptor"
[6]: https://trpc.io/docs/concepts?utm_source=chatgpt.com "Concepts"
[7]: https://trpc.io/docs/v10/server/procedures?utm_source=chatgpt.com "Define Procedures"
[8]: https://trpc.io/docs/server/server-side-calls?utm_source=chatgpt.com "Server Side Calls"
[9]: https://create.t3.gg/en/usage/trpc?utm_source=chatgpt.com "tRPC"
[10]: https://trpc.io/?utm_source=chatgpt.com "tRPC - Move Fast and Break Nothing. End-to-end typesafe ..."
[11]: https://angular.dev/guide/http/setup?utm_source=chatgpt.com "Setting up HttpClient"
[12]: https://v17.angular.io/guide/http-pass-metadata-to-interceptors?utm_source=chatgpt.com "HTTP - Pass metadata to interceptors"


立场先明：tRPC procedures 是在 TypeScript 世界里用函数来定义后端端点的一套类型安全抽象；Angular HttpInterceptor 则是 HttpClient 的请求-响应管线中的中间件机制。两者都叫“中间层”，却作用在完全不同的层级：tRPC 面向 API 端点的定义与调用链，HttpInterceptor 面向 HTTP 报文的拦截与编排。理解这一点，再去比较相似与差异，思路会很清晰。

tRPC Procedures 与 Angular HttpInterceptor：范式、边界与协同

立场先明：tRPC procedures 是在 TypeScript 世界里用函数来定义后端端点的一套类型安全抽象；Angular HttpInterceptor 则是 HttpClient 的请求-响应管线中的中间件机制。两者都叫“中间层”，却作用在完全不同的层级：tRPC 面向 API 端点的定义与调用链，HttpInterceptor 面向 HTTP 报文的拦截与编排。理解这一点，再去比较相

紫薇堂堂主

前端

后端

开发工具

tRPC procedures是TypeScript中类型安全的API端点抽象，用于定义后端函数；Angular HttpInterceptor则是HTTP请求-响应管线的中间件机制。两者虽都称为"中间层"，但作用层级不同：tRPC面向API端点调用链，HttpInterceptor面向HTTP报文拦截。tRPC提供端到端类型安全，HttpInterceptor专注于HTTP传输层处理。

TypeScript

中间件

数据库

路由

2026采购季 | AI焕新·智启新局

message-queue-catalog

tencentdb-catalog

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

tRPC procedures是TypeScript中类型安全的API端点抽象，用于定义后端函数；Angular HttpInterceptor则是HTTP请求-响应管线的中间件机制。两者虽都称为"中间层"，但作用层级不同：tRPC面向API端点调用链，HttpInterceptor面向HTTP报文拦截。tRPC提供端...

tRPC Procedures 与 Angular HttpInterceptor：范式、边界与协同-腾讯云开发者社区-腾讯云

tRPC Procedures 与 Angular HttpInterceptor：范式、边界与协同

tRPC Procedures 与 Angular HttpInterceptor：范式、边界与协同

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐