// 请求工具使用示例 import request from './request.js' // ===== 基本使用 ===== // 1. 默认带 loading 的请求 export const loginUser = async (username, password) => { try { const response = await request.post('/api/login', { username, password }) return response.data } catch (error) { console.error('登录失败:', error) throw error } } // 2. 自定义 loading 文字 export const uploadFile = async (fileData) => { return await request.post('/api/upload', fileData, { loading: { title: '上传中...', timeout: 30000 // 30秒超时 } }) } // 3. 禁用 loading(静默请求) export const heartbeat = async () => { return await request.get('/api/heartbeat', {}, { loading: false }) } // 4. 快速延迟设置(避免快速请求闪烁) export const quickSearch = async (keyword) => { return await request.get('/api/search', { keyword }, { loading: { title: '搜索中...', delay: 500 // 500ms 后才显示 loading } }) } // ===== 便捷方法使用 ===== // 1. 静默请求 export const silentRequests = { // 心跳检测 heartbeat: () => request.silent.get('/api/heartbeat'), // 埋点统计 track: (event) => request.silent.post('/api/track', { event }), // 实时搜索建议 searchSuggestion: (keyword) => request.silent.get('/api/suggest', { keyword }) } // 2. 自定义 loading 文字 export const customLoadingRequests = { // 数据导出 exportData: (params) => request.withLoading('导出中...').post('/api/export', params), // 数据同步 syncData: (data) => request.withLoading('同步中...').post('/api/sync', data), // 文件处理 processFile: (fileId) => request.withLoading('处理中...').post('/api/process', { fileId }) } // ===== 业务场景示例 ===== // 登录场景 export const authService = { // 登录 - 显示默认 loading login: async (credentials) => { return await request.post('/api/auth/login', credentials) }, // 刷新 token - 静默请求 refreshToken: async () => { return await request.silent.post('/api/auth/refresh') }, // 登出 - 自定义 loading logout: async () => { return await request.post('/api/auth/logout', {}, { loading: { title: '退出中...' } }) } } // 数据管理场景 export const dataService = { // 获取列表 - 默认 loading getList: async (params) => { return await request.get('/api/data/list', params) }, // 保存数据 - 自定义 loading saveData: async (data) => { return await request.post('/api/data/save', data, { loading: { title: '保存中...' } }) }, // 删除数据 - 确认后显示 loading deleteData: async (id) => { return await request.delete(`/api/data/${id}`, {}, { loading: { title: '删除中...' } }) }, // 实时搜索 - 延迟显示 loading search: async (keyword) => { return await request.get('/api/data/search', { keyword }, { loading: { title: '搜索中...', delay: 300 } }) } } // 文件操作场景 export const fileService = { // 文件上传 - 长时间 loading upload: async (file) => { return await request.post('/api/file/upload', file, { loading: { title: '上传中...', timeout: 60000 // 1分钟超时 } }) }, // 文件下载 - 自定义 loading download: async (fileId) => { return await request.get(`/api/file/download/${fileId}`, {}, { loading: { title: '下载中...' } }) }, // 获取文件列表 - 静默请求(如果是刷新操作) getFileList: async (silent = false) => { const options = silent ? { loading: false } : {} return await request.get('/api/file/list', {}, options) } } // ===== 错误处理和 Loading 管理 ===== // 手动控制 loading export const manualLoadingExample = async () => { try { // 显示自定义 loading request.loadingManager.show({ title: '复杂操作中...' }) // 执行多个静默请求 const [data1, data2, data3] = await Promise.all([ request.silent.get('/api/data1'), request.silent.get('/api/data2'), request.silent.get('/api/data3') ]) // 处理数据... return { data1, data2, data3 } } catch (error) { console.error('操作失败:', error) throw error } finally { // 确保隐藏 loading request.loadingManager.hide() } } // 强制清除所有 loading(紧急情况使用) export const emergencyStopLoading = () => { request.loadingManager.forceHide() } // ===== 使用建议 ===== /* 1. 默认情况下,所有请求都会显示 loading,无需额外配置 2. 以下场景建议禁用 loading: - 心跳检测、轮询请求 - 实时搜索、输入提示 - 埋点统计、日志上报 - 快速的状态检查 3. 以下场景建议自定义 loading 文字: - 文件上传下载 - 数据导出导入 - 复杂的数据处理 4. 延迟显示 loading 适用于: - 可能很快完成的请求 - 避免 loading 闪烁的场景 5. 超时设置建议: - 普通请求:10秒(默认) - 文件操作:30-60秒 - 复杂计算:根据实际情况调整 */