89 lines
3.0 KiB
Markdown
89 lines
3.0 KiB
Markdown
# 9.4 HTTP 请求封装
|
||
|
||
:::tip 概述
|
||
HTTP 封装在 utils/http/axios：VAxios 类 + transform 链式处理。统一完成信封解包（code===0 返回 data）、错误消息提示、401 跳登录、请求取消管理。业务只需 `http.request({url, method, params/data})`。
|
||
:::
|
||
|
||
## 封装架构
|
||
|
||
```text
|
||
utils/http/axios/
|
||
├── Axios.ts VAxios 类（拦截器安装/请求实例管理）
|
||
├── axiosTransform.ts transform 抽象基类（钩子：请求前/响应后/错误处理）
|
||
├── index.ts 实例配置（transform 实现 + 拦截器装配）
|
||
├── checkStatus.ts HTTP 层状态码处理（401/403/404/500…）
|
||
├── axiosCancel.ts 请求取消管理（重复请求取消）
|
||
├── helper.ts 日期格式化/时间戳拼接
|
||
└── types.ts RequestOptions / Result 类型
|
||
```
|
||
|
||
## 响应解包（transformRequestData，真实逻辑）
|
||
|
||
```text
|
||
1. isReturnNativeResponse → 返回原生响应头场景
|
||
2. isTransformResponse=false → 直接返回 res.data（需自处理 code 时）
|
||
3. 解构 {code, data, msg}：
|
||
hasSuccess = data && code === ResultEnum.SUCCESS（0）
|
||
成功：按 isShowSuccessMessage/successMessageText 提示 → 返回 data
|
||
失败：errMsg 含 \n → ElMessageBox.confirm（HTML 换行）
|
||
否则 → ElMessage.error(errMsg)
|
||
4. 401 → 跳登录页（配合 token 清理）
|
||
```
|
||
|
||
## 使用方式（api 模块真实模式）
|
||
|
||
```ts
|
||
import { http } from '@/utils/http/axios';
|
||
|
||
// GET（params）
|
||
export function getExamplePage(params?: Record<string, any>) {
|
||
return http.request({
|
||
url: '/example/page',
|
||
method: 'GET',
|
||
params,
|
||
});
|
||
}
|
||
|
||
// POST（data）
|
||
export function exampleAdd(data: any) {
|
||
return http.request({
|
||
url: '/example/add',
|
||
method: 'POST',
|
||
data,
|
||
});
|
||
}
|
||
```
|
||
|
||
请求选项（RequestOptions）可按请求定制：isShowMessage / isShowErrorMessage / isTransformResponse 等。
|
||
|
||
## 拦截器链
|
||
|
||
```text
|
||
请求拦截：
|
||
* token 注入（ACCESS_TOKEN 从 storage 读）
|
||
* 请求取消管理（axiosCancel，重复请求策略）
|
||
* 时间戳拼接（防缓存，可选）
|
||
|
||
响应拦截：
|
||
* checkStatus：HTTP 层状态码统一处理
|
||
* transformRequestData：信封解包与消息
|
||
* 401 → 清 token → 跳登录（redirect 记录来源）
|
||
```
|
||
|
||
## 与后端信封的对应
|
||
|
||
| 后端 code | 前端行为 |
|
||
|-----------|---------|
|
||
| 0 | 返回 data（解包完成，业务拿到纯数据） |
|
||
| 1 | ElMessage.error(msg)（ResultEnum.ERROR） |
|
||
| 401 | 跳登录页 |
|
||
| 403/429 等 | msg 弹窗（细分码降级为前端统一处理） |
|
||
|
||
## 开发规约
|
||
|
||
+ api 模块只写 url（不含 /api 前缀——baseURL 已含）
|
||
+ 默认走 transform 解包；需要看原始 code 时 `isTransformResponse: false`
|
||
+ 写操作成功提示用 `isShowSuccessMessage`（列表查询不弹成功）
|
||
+ 错误文案含多行时自动转 MessageBox（后端多行错误场景）
|
||
+ 排障：请求 404 → 查 url 是否重复拼了 /api 或 /v1；401 循环 → 查 refresh 逻辑与令牌存储
|