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

相关推荐
螺丝钉tina4 小时前
[Playwright][01] 从 Puppeteer 到 Playwright:为什么选择 Playwright + TypeScript?
前端·javascript·typescript
miofly18 小时前
GitHub 今日推荐|rea:用 MCP 把反编译器和 AI agent 接到一起的逆向工具
typescript·开源·github
ZoeLandia1 天前
React11:数据请求与 TanStack Query
前端·react.js·typescript·react
康小旺2 天前
AI 写 Vue 总写成同一个味道:给它装 Skills,装的不是知识是边界
vue.js·typescript
ZoeLandia2 天前
React08:自定义 Hook
开发语言·前端·react.js·typescript
aloha_7893 天前
HTML、JavaScript 与 TypeScript 基础速查
javascript·typescript·html
离歌漠4 天前
《我用 Tauri 做了一个本地开发工具箱》
rust·typescript·vue
enjoy编程4 天前
playwright学习-I
typescript·vue·nodejs·1024程序员节·playwright
iDao技术魔方4 天前
Bun v1.4.4 实战:用 bun fmt 替掉 prettier 的 5 个步骤
typescript·1024程序员节
梅雅达编程笔记4 天前
Day 17 | uni-app 小程序:前端从零搭建
微信小程序·typescript·uni-app·vue3·pinia·前端开发·全栈