更新记录
1.0.0(2025-09-22)
下载此版本
## [1.0.0] - 2025-09-21
### Added
- 初次发布。
- 实现核心请求功能,支持GET、POST、PUT、DELETE等方法。
- 实现自动Token管理。
- 实现请求防重机制。
- 实现请求重试机制。
- 实现错误统一处理与提示。
- 实现请求/响应拦截器。
- 实现请求取消功能。
- 提供完整的TypeScript类型定义。
- 提供丰富的配置选项。
平台兼容性
uni-app(3.6.5)
Vue2 |
Vue3 |
Chrome |
Safari |
app-vue |
app-nvue |
Android |
iOS |
鸿蒙 |
- |
- |
- |
- |
- |
- |
- |
- |
- |
微信小程序 |
支付宝小程序 |
抖音小程序 |
百度小程序 |
快手小程序 |
京东小程序 |
鸿蒙元服务 |
QQ小程序 |
飞书小程序 |
快应用-华为 |
快应用-联盟 |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
uni-app x(3.6.5)
Chrome |
Safari |
Android |
iOS |
鸿蒙 |
微信小程序 |
- |
- |
- |
- |
- |
- |
其他
hy-request-plus 增强型网络请求封装
一个功能强大、配置灵活的 uni-app 网络请求封装库。
特性
- 🔄 多端兼容: 支持 App、H5、各大小程序平台。
- 🔐 自动Token管理: 自动在请求头中添加认证令牌。
- ⚡ 请求防重: 防止短时间内重复提交相同请求。
- 🔁 请求重试: 支持失败请求自动重试。
- 🛡️ 错误统一处理: 自动处理常见错误并友好提示。
- ✋ 请求取消: 支持取消进行中的请求。
- 🔌 拦截器: 提供请求和响应拦截器。
- 🎯 TypeScript支持: 完整的类型定义。
- 📦 零依赖: 不依赖第三方库。
- 🔒 无权限依赖: 纯JS封装,不涉及任何系统权限。
安装
通过 HBuilderX 的 uni_modules
导入本插件,或手动将本插件放入你项目的 uni_modules
目录下。
使用方法
基本使用
// 导入请求库
import request from '@/uni_modules/hy-request-plus/js_sdk/hy-request-plus/index.esm.js';
// 发起GET请求
const response = await request.get('/api/user/info', { id: 123 });
console.log(response.data);
// 发起POST请求
const response = await request.post('/api/user/login', {
username: 'admin',
password: 'password'
});
console.log(response.data);
创建请求实例
import { Request } from '@/uni_modules/hy-request-plus/js_sdk/hy-request-plus/index.esm.js';
// 创建自定义配置的实例
const apiClient = Request.create({
baseURL: 'https://api.example.com',
timeout: 10000,
withToken: true
});
// 使用实例
const response = await apiClient.get('/user/info');
高级配置
// 全局配置
request.defaults.baseURL = 'https://api.example.com';
request.defaults.timeout = 15000;
request.defaults.withToken = true;
// 设置Token获取方式 (默认从uniStorage获取)
request.defaults.getToken = () => {
return 'your-access-token';
};
// 自定义错误处理
request.defaults.errorHandler = (error) => {
console.error('请求错误:', error);
// 可以在这里处理特定错误,如跳转到登录页
if (error.statusCode === 401) {
uni.navigateTo({ url: '/pages/login/login' });
}
};
使用拦截器
// 添加请求拦截器
request.interceptors.request.use(
(config) => {
// 在发送请求前做些什么
console.log('请求拦截:', config);
// 可以修改config,如添加公共参数
config.headers['X-Custom-Header'] = 'custom-value';
return config;
},
(error) => {
// 对请求错误做些什么
return Promise.reject(error);
}
);
// 添加响应拦截器
request.interceptors.response.use(
(response) => {
// 对响应数据做点什么
console.log('响应拦截:', response);
// 可以在这里处理业务逻辑,如判断自定义业务码
if (response.data && response.data.code !== 0) {
return Promise.reject(response.data);
}
return response;
},
(error) => {
// 对响应错误做点什么
console.error('响应错误:', error);
return Promise.reject(error);
}
);
取消请求
import { CancelToken, isCancel } from '@/uni_modules/hy-request-plus/js_sdk/hy-request-plus/index.esm.js';
// 创建取消令牌
const source = CancelToken.source();
// 发起可取消的请求
request.get('/api/some-data', {
cancelToken: source.token
}).catch(error => {
if (isCancel(error)) {
console.log('请求被取消:', error.message);
} else {
console.error('请求错误:', error);
}
});
// 取消请求
source.cancel('用户取消了操作');
// 取消所有进行中的请求
request.cancelAllRequests('页面跳转,取消所有请求');
// 根据URL模式取消请求
request.cancelRequestsByUrl('/api/temp-data', '不再需要此数据');
完整配置选项
配置项 类型 默认值 说明
baseURL String '' 请求的基础地址
timeout Number 60000 请求超时时间(ms)
headers Object {...} 请求头
withToken Boolean true 是否自动携带Token
tokenHeaderName String 'Authorization' Token头部字段名
tokenPrefix String 'Bearer ' Token前缀
getToken Function () => storage.token 获取Token的函数
setToken Function null 设置Token的函数
enableAntiShake Boolean true 是否开启请求防重
antiShakeDelay Number 500 防重等待时间(ms)
retryCount Number 2 请求重试次数
retryDelay Number 1000 请求重试间隔(ms)
retryStatusCodes Array [500,502,503,504] 需要重试的状态码
retryOnTimeout Boolean true 是否对超时错误重试
showLoading Boolean false 是否显示Loading提示
loadingText String '加载中...' Loading提示文本
loadingMask Boolean true Loading是否显示遮罩
autoHandleError Boolean true 是否自动处理错误
errorDuration Number 3000 错误提示持续时间(ms)
errorMessageMap Object {...} HTTP错误码映射
errorHandler Function null 自定义错误处理函数
validateStatus Function status => status<300 成功状态码校验
transformResponse Function data => JSON.parse(data) 响应数据转换
paramsSerializer Function 默认序列化 参数序列化函数
注意事项
1.Token管理: 默认从 uni.getStorageSync('ACCESS_TOKEN') 获取Token,可以通过 getToken 配置项自定义获取方式。
2.防重机制: 基于请求方法、URL和参数生成唯一key,默认500ms内相同请求只会发送一次。
3.错误处理: 默认会自动显示错误提示,可以通过 autoHandleError: false 关闭,然后自行处理错误。
4.TypeScript: 项目已提供完整的类型定义,推荐使用TypeScript以获得更好的开发体验。