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

相关推荐
cup111 天前
[Full Clock 技术复盘] 一、浏览器前端如何实现百毫秒级时间校准?时间 API 推荐、模拟 NTP 算法原理及局限
typescript·开源·api·时钟·时间同步
梦想的颜色1 天前
TypeScript 完全指南(上):从零开始掌握类型系统
前端·typescript
烛衔溟2 天前
TypeScript 类的静态成员与静态方法
开发语言·javascript·typescript
王林不想说话2 天前
TypeScript 进阶知识总结:从 extends、泛型到 infer,一篇打通 TS 类型系统
前端·javascript·typescript
且听风吟_xincell2 天前
用 TypeScript 从零写一个 TCP 聊天室(上)—— 网络编程入门实战
网络·tcp/ip·typescript
烛衔溟2 天前
TypeScript 模块与声明文件全解
linux·ubuntu·typescript
92year2 天前
从零写一个MCP Server:让Claude Code直接操作你的数据库
typescript·sqlite·ai agent·mcp·claude code
梦想的颜色2 天前
TypeScript 完全指南(中):函数、接口、类与高级类型
前端·typescript
wgc2k2 天前
Nest.js基础-5:关于Docker的简单概述
docker·typescript·node.js
Tiffany_Ho2 天前
Derek-Callan-business-english: 用现代前端技术打造高效商务英语学习平台
前端·typescript·node.js