Axios二次封装及API 调用框架

项目代码其实是两部分,一部分是基于 Axios 的 HTTP 请求封装;一部分是API 基础封装与管理,参考了后端接口,类,抽像类的设计思路。

☛ 基于 Axios 的 HTTP 请求封装

该文件提供了基于 Axios 的 HTTP 请求封装,主要功能包括:
  1. 请求头管理:自动添加 Content-Type、CSRF 令牌、认证令牌等基础请求头
  2. 双实例设计:分别创建 read 和 write 两个 Axios 实例,用于不同类型的请求
  3. 拦截器配置:为请求和响应添加拦截器,可用于统一处理请求和响应
  4. 统一 API 方法:封装了 apiFunc 函数,支持 GET、POST、PUT、DELETE 等请求方法
  5. 读写分离:提供 requestRead 和 requestWrite 两个函数,分别用于读操作和写操作
  6. 错误类型定义:统一定义了常见错误类型,便于错误处理
使用示例:
typescript 复制代码
// 读操作示例
import { requestRead } from './axios/basic/axios'

const response = await requestRead({
  method: 'get',
  url: '/api/users',
 data: { page: 1, pageSize: 10 }
})

// 写操作示例
import { requestWrite } from './axios/basic/axios'

const response = await requestWrite({
 method: 'post',
 url: '/api/users',
 data: { name: 'John', age: 30 }
})
注意事项:
  • GET 和 DELETE 请求的参数会自动转换为 URL 查询参数
  • POST 和 PUT 请求的参数会作为请求体发送
  • 所有请求都会自动添加必要的请求头,包括认证令牌和 CSRF 令牌
  • 支持自定义 axios 配置,会与默认配置合并

☛ 基于 Axios 的 HTTP 请求封装

该文件提供了一套完整的 API 调用框架,主要功能包括:
  1. 端点配置管理 :通过 EndpointConfig 类标准化 API 端点配置
  2. 通用请求处理 :封装了 request 方法,支持缓存、错误处理等高级功能
  3. CRUD 操作:提供了 list、page、add、update、delete、getById 等通用方法
  4. 缓存机制:实现了基于内存的请求缓存,提高重复请求的响应速度
  5. 错误处理:统一的错误类型定义和错误信息处理
  6. 加载状态管理:自动处理请求的加载状态显示
核心组件:
  • EndpointConfig:API 端点配置类,用于创建标准化的 API 端点配置
  • ApiBase:API 基础抽象类,提供通用的 API 操作方法
使用示例:
typescript 复制代码
// 1. 定义 API 端点配置
const userEndpoints: IBaseApiEndpoints = {
  list: new EndpointConfig('/api/users', {
    method: 'get',
    requestType: 'read',
    cacheable: true
  }),
  add: new EndpointConfig('/api/users', {
    method: 'post',
    requestType: 'write'
  }),
  // 其他端点配置...
}

// 2. 创建 API 实例
class UserApi extends ApiBase {
  constructor() {
    super(userEndpoints)
  }
}

// 3. 使用 API 实例
const userApi = new UserApi()

// 获取用户列表
const users = await userApi.list({ page: 1, pageSize: 10 })

// 添加新用户
await userApi.add({ name: 'John', email: 'john@example.com' })

// 更新用户信息
await userApi.update(1, { name: 'John Doe' })

// 删除用户
await userApi.delete([1, 2, 3])

// 获取用户详情
const user = await userApi.getById(1)
特性说明:
  • 支持读写分离(read/write)
  • 自动处理加载状态显示
  • 统一的错误处理和提示
  • 可配置的缓存机制
  • 标准化的 API 端点配置

欢迎下载源码 使用,如觉得有用麻烦您点个赞。

相关推荐
ayqy贾杰1 小时前
基层管理的三板斧,在AI时代行不通了
前端·后端·团队管理
Apifox1 小时前
Apifox 5 月更新|Postman 导入优化、Runner 支持非 root 运行、请求代码自动带鉴权
前端·后端·安全
miaowmiaow1 小时前
PSD2Code 近期更新与深度解析:从设计稿到生产级代码的完整技术栈
前端·人工智能·ai编程
Hilaku1 小时前
多标签页并发请求导致 Token 刷新失败?只有 15行代码就能解决 !
前端·javascript·程序员
Nile1 小时前
解密Palantir系列一:4. Ontology 不是哲学
开发语言·前端·javascript
因_崔斯汀2 小时前
ECharts 区域地图可视化实战:以山东地图为例
前端
Bacon2 小时前
手摸手带你搞清楚 AI Agent 的六大核心概念
前端·人工智能
王林不想说话2 小时前
TypeScript 进阶知识总结:从 extends、泛型到 infer,一篇打通 TS 类型系统
前端·javascript·typescript
卤蛋fg62 小时前
vxe-table 实现数据分组统计与表尾合计
vue.js
罗超驿2 小时前
15.JavaScript 函数与作用域完全指南:语法、参数、表达式与作用域链实战
开发语言·前端·javascript