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

相关推荐
柯克七七10 小时前
我把 bug 修得太干净了,测试组以为这个模块本来就没问题
前端·javascript·typescript
退休倒计时11 小时前
【每日一题】LeetCode 39. 组合总和 TypeScript
算法·leetcode·typescript
yyt36304584111 小时前
KlineChartQuant Tooltip 高频交互 200FPS 性能优化完整复盘
前端·经验分享·性能优化·typescript·vue·交互·chrome devtools
用户09340777351416 小时前
HarmonyOS WPS Open SDK 实践:办公审批附件「打开—编辑—回传」代码实现
typescript·harmonyos
Flynt17 小时前
TypeScript 5.8 让我少踩了一个大坑,顺手再聊聊 --erasableSyntaxOnly
前端·javascript·typescript
退休倒计时2 天前
【每日一题】LeetCode 17. 电话号码的字母组合 TypeScript
算法·leetcode·typescript
无情的西瓜皮3 天前
MCP 协议实战:从零搭建一个 MCP 服务器(Node.js 版)
vue.js·人工智能·typescript·node.js
退休倒计时3 天前
【每日一题】LeetCode 78. 子集 TypeScript
算法·leetcode·typescript
学习-学习3 天前
Node.js 现在能直接跑 TypeScript 了?Type Stripping 原理、限制与 tsx / ts-node 取舍
typescript·node.js
yume_sibai3 天前
大屏数据可视化 - 边框红绿呼吸灯实现详解
前端·信息可视化·typescript