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 ...@@ -140,11 +140,238 @@ export const updateProfileAPI = (params) => fn(fetch.post(Api.UPDATE_PROFILE, pa
140 140
141 #### 3. 错误处理机制 141 #### 3. 错误处理机制
142 142
143 -`fn()` 函数自动处理API响应: 143 +`fn()` 函数处理API响应并返回标准格式:
144 -- 成功时返回 `response.data` 144 +- 返回格式:`{ code, msg, data }`
145 -- 失败时显示错误提示并返回 `false` 145 +- `code === 1` 表示请求成功,其他值表示失败
146 +- `msg` 包含服务器返回的提示信息
147 +- `data` 包含具体的业务数据
146 - 特殊处理"计全付"相关错误,使用模态框显示 148 - 特殊处理"计全付"相关错误,使用模态框显示
147 149
150 +#### 4. API使用示例
151 +
152 +##### 在组件中调用API
153 +
154 +```javascript
155 +<script setup>
156 +import { ref, onMounted } from 'vue';
157 +import { getProfileAPI, updateProfileAPI } from '@/api/index';
158 +import { getVehicleListAPI, addVehicleAPI } from '@/api/car';
159 +import { getOrderListAPI } from '@/api/orders';
160 +
161 +// 响应式数据
162 +const userInfo = ref({});
163 +const vehicleList = ref([]);
164 +const orderList = ref([]);
165 +const loading = ref(false);
166 +
167 +// 获取用户信息
168 +const fetchUserProfile = async () => {
169 + loading.value = true;
170 + try {
171 + const { code, msg, data } = await getProfileAPI();
172 + if (code === 1) {
173 + userInfo.value = data;
174 + console.log('用户信息获取成功:', data);
175 + } else {
176 + console.error('获取用户信息失败:', msg);
177 + }
178 + } catch (error) {
179 + console.error('获取用户信息异常:', error);
180 + } finally {
181 + loading.value = false;
182 + }
183 +};
184 +
185 +// 更新用户资料
186 +const updateProfile = async (profileData) => {
187 + const params = {
188 + nickname: profileData.nickname,
189 + avatar_url: profileData.avatar_url,
190 + gender: profileData.gender
191 + };
192 +
193 + const { code, msg, data } = await updateProfileAPI(params);
194 + if (code === 1) {
195 + console.log('资料更新成功:', msg);
196 + // 重新获取用户信息
197 + await fetchUserProfile();
198 + }
199 +};
200 +
201 +// 获取车辆列表
202 +const fetchVehicleList = async () => {
203 + const params = {
204 + page: 1,
205 + limit: 10,
206 + status: 1 // 1-在售 2-已售
207 + };
208 +
209 + const { code, msg, data } = await getVehicleListAPI(params);
210 + if (code === 1) {
211 + vehicleList.value = data.list;
212 + console.log('车辆列表:', data);
213 + }
214 +};
215 +
216 +// 添加车辆
217 +const addVehicle = async (vehicleData) => {
218 + const params = {
219 + brand_id: vehicleData.brand_id,
220 + model_id: vehicleData.model_id,
221 + price: vehicleData.price,
222 + description: vehicleData.description,
223 + images: vehicleData.images, // 图片数组
224 + contact_phone: vehicleData.contact_phone
225 + };
226 +
227 + const { code, msg, data } = await addVehicleAPI(params);
228 + if (code === 1) {
229 + console.log('车辆添加成功:', msg);
230 + // 刷新车辆列表
231 + await fetchVehicleList();
232 + }
233 +};
234 +
235 +// 获取订单列表
236 +const fetchOrderList = async (status = '') => {
237 + const params = {
238 + page: 1,
239 + limit: 20
240 + };
241 +
242 + if (status) {
243 + params.status = status; // 订单状态筛选
244 + }
245 +
246 + const { code, msg, data } = await getOrderListAPI(params);
247 + if (code === 1) {
248 + orderList.value = data.list;
249 + console.log('订单列表:', data);
250 + }
251 +};
252 +
253 +// 页面加载时获取数据
254 +onMounted(() => {
255 + fetchUserProfile();
256 + fetchVehicleList();
257 + fetchOrderList();
258 +});
259 +</script>
260 +```
261 +
262 +##### 带错误处理的API调用
263 +
264 +```javascript
265 +// 完整的错误处理示例
266 +const handleApiCall = async (apiFunction, params, successMessage = '') => {
267 + loading.value = true;
268 +
269 + try {
270 + const { code, msg, data } = await apiFunction(params);
271 +
272 + if (code === 1) {
273 + // API调用成功
274 + if (successMessage) {
275 + // 显示成功提示
276 + Taro.showToast({
277 + title: successMessage,
278 + icon: 'success'
279 + });
280 + }
281 + return { code, msg, data };
282 + } else {
283 + // API返回失败,显示服务器返回的错误信息
284 + Taro.showToast({
285 + title: msg || '操作失败',
286 + icon: 'none'
287 + });
288 + return false;
289 + }
290 + } catch (error) {
291 + // 网络错误或其他异常
292 + console.error('API调用异常:', error);
293 + Taro.showToast({
294 + title: '网络异常,请稍后重试',
295 + icon: 'none'
296 + });
297 + return false;
298 + } finally {
299 + loading.value = false;
300 + }
301 +};
302 +
303 +// 使用示例
304 +const saveProfile = async () => {
305 + const result = await handleApiCall(
306 + updateProfileAPI,
307 + { nickname: '新昵称' },
308 + '资料保存成功'
309 + );
310 +
311 + if (result) {
312 + // 处理成功后的逻辑
313 + await fetchUserProfile();
314 + }
315 +};
316 +```
317 +
318 +##### 分页数据加载示例
319 +
320 +```javascript
321 +// 分页加载车辆列表
322 +const vehicleListData = ref({
323 + list: [],
324 + page: 1,
325 + limit: 10,
326 + total: 0,
327 + hasMore: true
328 +});
329 +
330 +// 加载车辆列表(支持分页和下拉刷新)
331 +const loadVehicleList = async (refresh = false) => {
332 + if (refresh) {
333 + vehicleListData.value.page = 1;
334 + vehicleListData.value.list = [];
335 + vehicleListData.value.hasMore = true;
336 + }
337 +
338 + if (!vehicleListData.value.hasMore) return;
339 +
340 + const params = {
341 + page: vehicleListData.value.page,
342 + limit: vehicleListData.value.limit,
343 + status: 1
344 + };
345 +
346 + const { code, msg, data } = await getVehicleListAPI(params);
347 + if (code === 1) {
348 + const { list, total } = data;
349 +
350 + if (refresh) {
351 + vehicleListData.value.list = list;
352 + } else {
353 + vehicleListData.value.list.push(...list);
354 + }
355 +
356 + vehicleListData.value.total = total;
357 + vehicleListData.value.page++;
358 +
359 + // 判断是否还有更多数据
360 + vehicleListData.value.hasMore = vehicleListData.value.list.length < total;
361 + }
362 +};
363 +
364 +// 下拉刷新
365 +const onRefresh = () => {
366 + loadVehicleList(true);
367 +};
368 +
369 +// 上拉加载更多
370 +const onLoadMore = () => {
371 + loadVehicleList(false);
372 +};
373 +```
374 +
148 ### 网络请求配置 375 ### 网络请求配置
149 376
150 #### 1. 环境配置 377 #### 1. 环境配置
......