签入版本

RXThinkCMF_ThinkPhp6_EleVue/zh/frontend/http.md

@@ -0,0 +1,90 @@
+# 9.4 HTTP 请求封装
+
+:::tip 概述
+前端使用 Axios 封装 HTTP 请求，自动处理 Token 携带、响应码判断、错误提示。
+:::
+
+## 封装结构
+
+```text
+src/utils/http/axios/
+├── index.ts          # Axios 实例配置和拦截器
+├── Axios.ts          # VAxios 类封装
+├── axiosTransform.ts # 数据转换接口
+├── checkStatus.ts    # HTTP 状态码处理
+├── helper.ts         # 辅助函数
+└── types.ts          # 类型定义
+```
+
+## 核心拦截器
+
+### 请求拦截器（自动携带 Token）
+
+```typescript
+// src/utils/http/axios/index.ts
+
+// 请求前自动添加 Token
+config.headers['Authorization'] = `Bearer ${token}`;
+```
+
+### 响应拦截器（统一错误处理）
+
+```typescript
+// 响应处理逻辑
+const { code, data, msg } = res.data;
+
+if (code === 0) {
+    return data;    // 成功，返回 data
+}
+
+if (code === 401) {
+    // Token 过期，跳转登录
+    router.push('/login');
+}
+
+// 其他错误，显示提示
+ElMessage.error(msg || '操作失败');
+```
+
+:::tip 响应处理规则
+- `code === 0`：成功，返回 `data`
+- `code === 401`：Token 过期，自动跳转登录页
+- `code === 403`：权限不足，显示错误提示
+- 其它 `code`：业务失败，显示 `msg`
+:::
+
+## API 模块编写
+
+```typescript
+// src/api/tool/example.ts
+import { http } from '@/utils/http/axios';
+
+export function getExamplePage(params?: Record<string, any>) {
+  return http.request({
+    url: '/example/page',
+    method: 'GET',
+    params,
+  });
+}
+
+export function exampleAdd(data: any) {
+  return http.request({
+    url: '/example/add',
+    method: 'POST',
+    data,
+  });
+}
+```
+
+## 在组件中使用
+
+```typescript
+import { getExamplePage, exampleAdd } from '@/api/tool/example';
+
+// 获取列表
+const res = await getExamplePage({ pageNo: 1, pageSize: 10 });
+tableData.value = res.records;
+
+// 新增
+await exampleAdd({ name: '测试', status: 1 });
+```