🔥 我把 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

相关推荐
zhousenshan1 天前
TypeScript 入门到精通
typescript
花旗蜕变1 天前
前端转 NestJS 全栈实践:从表单页面到微信业务系统
前端·typescript·nestjs
艺杯羹1 天前
Anthropic突袭发布Claude Code Mods!用TypeScript编写智能体中间件:告别AI误删与失控
人工智能·typescript·系统架构
FYKJ_20104 天前
SSM校园失物招领系统41452-计算机课程设计、毕业设计
java·vue.js·spring boot·python·mysql·typescript·spark
tiankongdeyige4 天前
游戏战斗系统学习第2篇:有限状态机 (FSM)
学习·游戏·typescript
FYKJ_20105 天前
django电影推荐系统55066-计算机课程设计、毕业设计
vue.js·spring boot·python·mysql·typescript·spark·django
进击的明明5 天前
TypeScript速通笔记(下)
前端·面试·typescript
愛芳芳5 天前
element-plus+vite+vue3+pinpa+mock+typeScript搭建经典的电商管理后台
前端·javascript·typescript
miss5 天前
从零做一个可视化规则引擎:Vue3 递归条件树 + 双引擎结果对比
前端·vue.js·typescript
seowmt6 天前
结构化数据和自然语言描述哪个更管用?答案分场景
人工智能·google·typescript·go语言·schema