🔥 我把 axios 接口封装,玩出了 NestJS 的感觉

一、前言

用过 NestJS 的同学,应该都对这种声明式接口写法印象深刻:

1. 第一步:扩展 Axios 类型,解决自定义属性报错

首先给 AxiosRequestConfig 扩展自定义属性,避免 TS 报错:

2. 第二步:抽离公共路径解析函数

这是整个方案的灵魂,专门处理 :id 这类路径参数,自动替换并过滤查询参数:

3. 第三步:实现 Get/Post 装饰器

封装通用的请求装饰器,自动处理路径参数、请求配置、Token 开关:

4. 第四步:请求拦截器,全局处理 Token

直接导入 Redux store 实例,组件外也能拿到 Token:

5.最终使用体验

定义 API 类,像写 Nest 接口一样简单

6.调用接口

实际调用例子

7.注意事项

开启experimentalDecorators 和 emitDecoratorMetadata

相关推荐
掰头战士15 小时前
三道保险丝,最后只能放弃治疗? 一文聊聊我的agent是怎么做死循环检测的
typescript·llm·agent
掰头战士16 小时前
AgentLoop: 从 while(true) 到生产级循环
typescript·llm·agent
Eric_见嘉19 小时前
打开这个 VSC 设置「组件引用位置」和数量就都清楚了
前端·typescript·visual studio code
今日无bug20 小时前
从 0 到 1 搭建端侧 AI 项目:DeepSeek-R1 + WebGPU + React + TS + Tailwind 全栈笔记
前端·react.js·typescript
JaydenAI3 天前
[TypeScript学习笔记-11]创建一个极简的monorepo项目
typescript·monorepo
濮水大叔3 天前
舒服了,CabloyJS 的 AI Spec 驱动开发会自动生成甘特图和燃尽图
typescript·node.js·vibecoding
DreamLife☼5 天前
Agent开发环境搭建完全指南
python·docker·typescript·node·工业知识点