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. 环境配置 | ... | ... |
-
Please register or login to post a comment