116 lines
2.8 KiB
Markdown
116 lines
2.8 KiB
Markdown
|
# API 模块使用说明
|
|||
|
|
|
|||
|
|
## 概述
|
|||
|
|
|
|||
|
|
本项目使用统一的API请求工具 `@/utils/request.js`，所有API请求都通过该工具进行，无需重复配置基地址和请求头。
|
|||
|
|
|
|||
|
|
## 目录结构
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
api/
|
|||
|
|
├── index.js # API模块统一导出
|
|||
|
|
├── lease/ # 租赁相关API
|
|||
|
|
│ └── lease.js
|
|||
|
|
├── device/ # 设备相关API
|
|||
|
|
│ └── device.js
|
|||
|
|
├── banner/ # 轮播图相关API
|
|||
|
|
│ └── banner.js
|
|||
|
|
├── article/ # 文章相关API
|
|||
|
|
│ └── article.js
|
|||
|
|
└── auth/ # 认证相关API
|
|||
|
|
└── auth.js
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 使用方法
|
|||
|
|
|
|||
|
|
### 1. 导入API方法
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
// 方式1：从具体模块导入
|
|||
|
|
import { getDeviceTypes, getPeriodPackages } from '@/api/lease/lease.js'
|
|||
|
|
|
|||
|
|
// 方式2：从统一入口导入
|
|||
|
|
import { getDeviceTypes, getPeriodPackages } from '@/api/index.js'
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2. 在组件中使用
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
export default {
|
|||
|
|
methods: {
|
|||
|
|
async fetchData() {
|
|||
|
|
try {
|
|||
|
|
const response = await getDeviceTypes()
|
|||
|
|
|
|||
|
|
if (response.code === 200) {
|
|||
|
|
this.deviceTypes = response.data
|
|||
|
|
} else {
|
|||
|
|
throw new Error(response.message || '请求失败')
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('获取数据失败:', error)
|
|||
|
|
uni.showToast({
|
|||
|
|
title: error.message || '获取数据失败',
|
|||
|
|
icon: 'error',
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## API方法命名规范
|
|||
|
|
|
|||
|
|
- 获取列表：`getXxxList`
|
|||
|
|
- 获取详情：`getXxxDetail`
|
|||
|
|
- 创建：`createXxx`
|
|||
|
|
- 更新：`updateXxx`
|
|||
|
|
- 删除：`deleteXxx`
|
|||
|
|
|
|||
|
|
## 请求工具特性
|
|||
|
|
|
|||
|
|
### 自动处理
|
|||
|
|
- ✅ 基地址配置
|
|||
|
|
- ✅ 请求头设置
|
|||
|
|
- ✅ Token管理
|
|||
|
|
- ✅ Loading状态
|
|||
|
|
- ✅ 错误处理
|
|||
|
|
- ✅ 超时处理
|
|||
|
|
|
|||
|
|
### 配置选项
|
|||
|
|
```javascript
|
|||
|
|
request({
|
|||
|
|
url: '/api/endpoint',
|
|||
|
|
method: 'GET',
|
|||
|
|
params: { id: 1 },
|
|||
|
|
loadingText: '加载中...', // 自定义loading文本
|
|||
|
|
showLoading: true, // 是否显示loading
|
|||
|
|
timeout: 60000, // 超时时间
|
|||
|
|
noToken: false, // 是否需要token
|
|||
|
|
})
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 环境配置
|
|||
|
|
|
|||
|
|
请求工具会根据当前环境自动选择对应的配置：
|
|||
|
|
|
|||
|
|
- **开发环境**：`http://192.168.2.114:4601`
|
|||
|
|
- **体验版**：`http://192.168.2.114:4601`
|
|||
|
|
- **正式版**：`http://192.168.2.114:4601`
|
|||
|
|
|
|||
|
|
## 错误处理
|
|||
|
|
|
|||
|
|
所有API请求都会自动处理以下错误：
|
|||
|
|
|
|||
|
|
- 401：登录过期，自动跳转登录页
|
|||
|
|
- 403：权限不足
|
|||
|
|
- 404：资源不存在
|
|||
|
|
- 500：服务器错误
|
|||
|
|
- 网络错误：超时、连接失败等
|
|||
|
|
|
|||
|
|
## 注意事项
|
|||
|
|
|
|||
|
|
1. **方法名冲突**：避免页面方法名与API方法名相同，建议使用别名导入
|
|||
|
|
2. **Loading管理**：请求工具已内置loading管理，无需手动处理
|
|||
|
|
3. **错误提示**：统一使用 `uni.showToast` 显示错误信息
|
|||
|
|
4. **Token处理**：开发环境支持临时token，生产环境使用真实token
|