更新记录

1.0.1（2025-12-31） 下载此版本

• 新增u-http插件
• 支持uni-app、uni-app vue3、微信小程序、支付宝小程序、百度小程序、字节跳动小程序、QQ小程序、H5、App等平台
• 支持Promise、async/await、回调函数等多种调用方式
• 支持自定义请求头、请求参数、请求体、响应类型等
• 支持请求拦截器、响应拦截器、错误处理等
• 支持全局配置、局部配置、实例配置等
• 支持文件上传、token刷新等

1.0.0（2025-12-31） 下载此版本

• 新增u-http插件
• 支持uni-app、uni-app vue3、微信小程序、支付宝小程序、百度小程序、字节跳动小程序、QQ小程序、H5、App等平台
• 支持Promise、async/await、回调函数等多种调用方式
• 支持自定义请求头、请求参数、请求体、响应类型等
• 支持请求拦截器、响应拦截器、错误处理等
• 支持全局配置、局部配置、实例配置等
• 支持文件上传、token刷新等

平台兼容性

uni-app(4.0)

uni-app x(4.0)

u-http

简介

u-http 是一个基于 uni.request 二次封装的 HTTP 请求库，专为 uni-app 项目设计。它提供了拦截器、默认配置、token 刷新、请求队列管理等高级功能，简化了网络请求的开发流程。

功能特性

• 拦截器支持：支持请求/响应拦截器链式调用
• Token 无痛刷新：支持 401 自动重试，实现 token 刷新无感知
• 请求队列管理：支持请求管理和取消功能
• 兼容 uni.request API：完全兼容 uni.request 的使用方式
• 上传进度监听：支持文件上传进度回调
• 缓存机制：支持响应结果缓存
• 重试机制：支持请求失败重试

安装

直接在 uni-app 项目中引入即可使用。

使用说明

基本使用

import Request from '@/uni_modules/u-http'

// 创建实例
const service = new Request({
  baseURL: 'https://api.example.com',
  timeout: 60000,
})

// 发起请求
service.request({
  url: '/api/data',
  method: 'GET'
}).then(res => {
  console.log(res)
})

配置拦截器

// 请求拦截器
service.addRequestInterceptor(
  (config) => {
    // 添加认证 token
    const token = uni.getStorageSync("user-token")
    if (token) {
      config.header['Authorization'] = 'Bearer ' + token
    }
    return config
  },
  (error) => {
    return Promise.reject(error)
  }
)

// 响应拦截器
service.addResponseInterceptor(
  (response) => {
    // 处理响应数据
    return response.data
  },
  (error) => {
    return Promise.reject(error)
  }
)

上传文件并监听进度

// 上传文件
const uploadTask = service.request({
  url: '/upload',
  filePath: filePath,
  name: 'file',
  isUpload: true,
  onUploadProgress: (progressEvent) => {
    // 监听上传进度
    console.log('上传进度:', progressEvent.progress + '%');
    // progressEvent 包含以下属性：
    // - progress: 当前上传进度百分比 (0-100)
    // - totalBytesSent: 已上传的数据长度
    // - totalBytesExpectedToSend: 预期需要上传的数据总长度
  }
})

Token 刷新配置

// 启用自动刷新
service.autoRefreshEnabled = true
service.maxRetryCount = 2

// 设置刷新 token 的方法
service.setRefreshTokenMethod(async () => {
  const res = await uni.request({
    url: '/auth/refresh',
    method: 'POST'
  })
  return res.data.token
})

便捷使用方式

在项目中创建统一的请求文件：

// utils/request/index.js
import Request from '@/uni_modules/u-http'
import globalData from '@/api/globalData.js'

const service = new Request({
  baseURL: globalData.baseUrl,
  timeout: 60000,
})

// 配置拦截器等...

const request = (options) => {
  return service.request(options)
}

export default request

然后在页面中使用：

// pages/index/service.js
import request from '@/utils/request'

export function uploadFile(data) {
  return request({
    url: `/upload`,
    filePath: data.filePath,
    name: 'file',
    formData: data.formData || {},
    isUpload: true,
    onUploadProgress: data.onUploadProgress // 传递进度回调
  })
}

API 说明

Request 类

• constructor(options)：构造函数

  • baseURL {string} - 基础 URL 地址
  • timeout {number} - 请求超时时间（毫秒）
  • maxRetryCount {number} - token 刷新失败后的最大重试次数

• request(options)：发起 HTTP 请求

  • url {string} - 请求路径
  • method {string} - 请求方法
  • data {object} - 请求数据
  • header {object} - 请求头
  • onUploadProgress {function} - 上传进度回调
  • onDownloadProgress {function} - 下载进度回调
  • 其他 uni.request 支持的参数

• addRequestInterceptor(interceptor, onRejected)：添加请求拦截器

• addResponseInterceptor(interceptor, onRejected)：添加响应拦截器

• cancelRequest(requestId)：取消指定请求

• cancelAllRequests()：取消所有请求

注意事项

1. 当使用文件上传功能时，需要设置 isUpload: true
2. 上传进度回调使用 onUploadProgress，通过 uploadTask.onProgressUpdate() 实现
3. Token 刷新功能需要配合后端接口实现
4. 在生产环境中应合理设置超时时间和重试次数