使用 vue3 + javascript 开发项目
- ✅ Vue3
- ✅ JavaScript
- ✅ Pinia
- ✅ Pnpm
- ✅ Sass
工具库 utils
请求库
用作请求接口的，封装的 uni.request，返回一个 Promise。
使用示例
- request(options, [config])
options参考
| 名称 | 类型 | 必填 | 默认值 | 备注 |
|---|---|---|---|---|
| url | string |
是 | - | 接口地址，示例：/api/user/get |
| method | string |
否 | GET | 可选项 GET POST PUT DELETE OPTIONS 等，参考 uni.request method 参数有效值 |
| data | object |
否 | - | 提交参数 |
| header | object |
否 | - | 请求头，示例 { token: '你的 token'} |
config参考
| 名称 | 类型 | 必填 | 默认值 | 备注 |
|---|---|---|---|---|
| baseUrl | string |
否 | - | 基础接口地址, 读取 .env 的 VITE_APP_BASE_URL |
| isReturnDefaultResponse | bool |
否 | false | 返回默认响应体，不做额外处理， 原样返回 |
| isTransformResponse | bool |
否 | true | 转换响应体，false 直接返回 data, true 自动处理业务代码报错提示等（前提 isReturnDefaultResponse 是 false） |
| ignoreCancel | bool |
否 | false | 忽略取消重复请求 |
| retryCount | number |
否 | 2 | 重试次数 |
| retryTimeout | number |
否 | 300 | 重试延迟 |
| withToken | bool |
否 | true | 携带 token |
| isAuth | bool |
否 | false | 接口是否鉴权，暂时无用，可在拦截器中扩展 |
请求示例
🏷️ 所有接口请求都必须放在 src/api/ 目录下统一维护
import request from '@/utils/request'
// get 请求
export function getCaptchaImage() {
return request.get({
url: '/api/captchaImage',
})
}
// post 请求
export function login(data) {
return request.post({
url: '/api/user/login',
data
})
}
@/utils/cache.js
缓存工具
import cache from '@/utils/cache.js'
// 设置缓存
cache.set('token', '1b1b1b1b1b1')
// 获取缓存
cache.get('token')
// 1b1b1b1b1b1
// 删除缓存
cache.remove('token')
// 获取时间戳
cache.time()
// 1660060800
@/utils/formatter.js
格式化工具
import { maskPhoneNumber, maskIdNumber} from '@/utils/formatter.js'
// 手机号加掩码
maskPhoneNumber('15112345678')
// 151****5678
// 证件号码加掩码
maskIdNumber('110101198506020011')
// 1101***********0011
@/utils/message.js
操作反馈
import {
showToast,
showAlert,
showLoading,
hideLoading,
useMessage
} from '@/utils/message.js'
// toast
showToast('操作成功')
// 模态确认框
showAlert('操作成功，请确认')
// 加载 loading
showLoading('拼命加载中')
hideLoading()
// 组合式api
const message = useMessage()
message.toast('提交成功')
message.success('操作成功')
message.error('操作失败')
message.alert('操作完成')
message.showLoading()
message.hideLoading()
@/utils/validate.js
验证库
import {
isUrl,
isPhoneNumber,
isIdCardValid,
isHttpProtocol,
isHttpsProtocol
} from '@/utils/validate.js'
isUrl('http://www.baidu.com') // true
isPhoneNumber('15112345601') // true
isIdCardValid('110101198506020011') // true
isHttpProtocol('ftp://root@192.168.1.1') // false