更新记录

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以获得更好的开发体验。

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。