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

相关推荐
索西引擎4 小时前
【理论】TypeScript 函数重载:从 Vue 3 defineEmits 说起的类型安全实践
前端·typescript
漫游的渔夫5 小时前
从 if-else 乱麻到状态机:前端开发者该怎么理解多 Agent 协作?
前端·人工智能·typescript
matrixmind86 小时前
sindresorhustype-fest:TypeScript 工具类型集合
前端·javascript·其他·typescript
guangzan1 天前
DeepSeek-Lane:在 Cursor 内使用 DeepSeek V4 模型
typescript
晓杰'1 天前
从0到1实现 Balatro 游戏后端(1):项目规划与牌型判断实现
后端·websocket·typescript·node.js·游戏开发·项目实战·nestjs
Forget the Dream1 天前
基于适配器模式的 Axios 封装实践
设计模式·typescript·axios·适配器模式
烛衔溟2 天前
TypeScript 接口继承与混合类型
linux·ubuntu·typescript
送鱼的老默2 天前
学习笔记--入门typescript直接案例开搞
前端·typescript
spmcor2 天前
TypeScript 中 null 与 undefined 的区别 —— 一篇彻底搞懂的指南
typescript