hookehuyr

docs: 更新README文档中的API使用示例和错误处理说明

Showing 1 changed file with 230 additions and 3 deletions
......@@ -140,11 +140,238 @@ export const updateProfileAPI = (params) => fn(fetch.post(Api.UPDATE_PROFILE, pa
#### 3. 错误处理机制
`fn()` 函数自动处理API响应:
- 成功时返回 `response.data`
- 失败时显示错误提示并返回 `false`
`fn()` 函数处理API响应并返回标准格式:
- 返回格式:`{ code, msg, data }`
- `code === 1` 表示请求成功,其他值表示失败
- `msg` 包含服务器返回的提示信息
- `data` 包含具体的业务数据
- 特殊处理"计全付"相关错误,使用模态框显示
#### 4. API使用示例
##### 在组件中调用API
```javascript
<script setup>
import { ref, onMounted } from 'vue';
import { getProfileAPI, updateProfileAPI } from '@/api/index';
import { getVehicleListAPI, addVehicleAPI } from '@/api/car';
import { getOrderListAPI } from '@/api/orders';
// 响应式数据
const userInfo = ref({});
const vehicleList = ref([]);
const orderList = ref([]);
const loading = ref(false);
// 获取用户信息
const fetchUserProfile = async () => {
loading.value = true;
try {
const { code, msg, data } = await getProfileAPI();
if (code === 1) {
userInfo.value = data;
console.log('用户信息获取成功:', data);
} else {
console.error('获取用户信息失败:', msg);
}
} catch (error) {
console.error('获取用户信息异常:', error);
} finally {
loading.value = false;
}
};
// 更新用户资料
const updateProfile = async (profileData) => {
const params = {
nickname: profileData.nickname,
avatar_url: profileData.avatar_url,
gender: profileData.gender
};
const { code, msg, data } = await updateProfileAPI(params);
if (code === 1) {
console.log('资料更新成功:', msg);
// 重新获取用户信息
await fetchUserProfile();
}
};
// 获取车辆列表
const fetchVehicleList = async () => {
const params = {
page: 1,
limit: 10,
status: 1 // 1-在售 2-已售
};
const { code, msg, data } = await getVehicleListAPI(params);
if (code === 1) {
vehicleList.value = data.list;
console.log('车辆列表:', data);
}
};
// 添加车辆
const addVehicle = async (vehicleData) => {
const params = {
brand_id: vehicleData.brand_id,
model_id: vehicleData.model_id,
price: vehicleData.price,
description: vehicleData.description,
images: vehicleData.images, // 图片数组
contact_phone: vehicleData.contact_phone
};
const { code, msg, data } = await addVehicleAPI(params);
if (code === 1) {
console.log('车辆添加成功:', msg);
// 刷新车辆列表
await fetchVehicleList();
}
};
// 获取订单列表
const fetchOrderList = async (status = '') => {
const params = {
page: 1,
limit: 20
};
if (status) {
params.status = status; // 订单状态筛选
}
const { code, msg, data } = await getOrderListAPI(params);
if (code === 1) {
orderList.value = data.list;
console.log('订单列表:', data);
}
};
// 页面加载时获取数据
onMounted(() => {
fetchUserProfile();
fetchVehicleList();
fetchOrderList();
});
</script>
```
##### 带错误处理的API调用
```javascript
// 完整的错误处理示例
const handleApiCall = async (apiFunction, params, successMessage = '') => {
loading.value = true;
try {
const { code, msg, data } = await apiFunction(params);
if (code === 1) {
// API调用成功
if (successMessage) {
// 显示成功提示
Taro.showToast({
title: successMessage,
icon: 'success'
});
}
return { code, msg, data };
} else {
// API返回失败,显示服务器返回的错误信息
Taro.showToast({
title: msg || '操作失败',
icon: 'none'
});
return false;
}
} catch (error) {
// 网络错误或其他异常
console.error('API调用异常:', error);
Taro.showToast({
title: '网络异常,请稍后重试',
icon: 'none'
});
return false;
} finally {
loading.value = false;
}
};
// 使用示例
const saveProfile = async () => {
const result = await handleApiCall(
updateProfileAPI,
{ nickname: '新昵称' },
'资料保存成功'
);
if (result) {
// 处理成功后的逻辑
await fetchUserProfile();
}
};
```
##### 分页数据加载示例
```javascript
// 分页加载车辆列表
const vehicleListData = ref({
list: [],
page: 1,
limit: 10,
total: 0,
hasMore: true
});
// 加载车辆列表(支持分页和下拉刷新)
const loadVehicleList = async (refresh = false) => {
if (refresh) {
vehicleListData.value.page = 1;
vehicleListData.value.list = [];
vehicleListData.value.hasMore = true;
}
if (!vehicleListData.value.hasMore) return;
const params = {
page: vehicleListData.value.page,
limit: vehicleListData.value.limit,
status: 1
};
const { code, msg, data } = await getVehicleListAPI(params);
if (code === 1) {
const { list, total } = data;
if (refresh) {
vehicleListData.value.list = list;
} else {
vehicleListData.value.list.push(...list);
}
vehicleListData.value.total = total;
vehicleListData.value.page++;
// 判断是否还有更多数据
vehicleListData.value.hasMore = vehicleListData.value.list.length < total;
}
};
// 下拉刷新
const onRefresh = () => {
loadVehicleList(true);
};
// 上拉加载更多
const onLoadMore = () => {
loadVehicleList(false);
};
```
### 网络请求配置
#### 1. 环境配置
......