更新记录

1.0.0（2026-10-08） 下载此版本

• 首个版本，实现组件基础能力，支持 Vue2 / Vue3、全平台（App / H5 / 各家小程序）。

平台兼容性

uni-app(3.8.5)

e-request 统一请求封装

基于 uni.request 的统一网络请求封装，提供拦截器、token 自动注入、统一错误处理、loading 控制、失败重试等能力。

特性

• 全局配置一次 baseURL / 超时 / 公共 header
• 请求与响应双拦截器，统一注入 token、统一解包业务数据
• 自动 loading 管理（带计数，并发请求不会误关）
• 失败自动重试，处理网络抖动
• 请求取消，解决页面快速切换的竞态
• 自动解包业务 data 字段，减少调用侧样板代码

引入

import { setConfig, get, post, addRequestInterceptor } from '@/uni_modules/e-request'

快速开始

1. 全局配置（在 main.js 或 App.vue 的 onLaunch 中执行一次）

import { setConfig } from '@/uni_modules/e-request'

setConfig({
  baseURL: 'https://api.example.com',
  timeout: 15000,
  header: {
    'Content-Type': 'application/json;charset=UTF-8'
  }
})

2. 注入 token

import { addRequestInterceptor } from '@/uni_modules/e-request'

addRequestInterceptor((options) => {
  const token = uni.getStorageSync('token')
  if (token) {
    options.header = options.header || {}
    options.header.Authorization = `Bearer ${token}`
  }
  return options   // 必须返回 options 才能生效
})

3. 发起请求

import { get, post } from '@/uni_modules/e-request'

// GET，自动返回 data 字段内容
const list = await get('/user/list', { page: 1, size: 20 })

// POST + 自动 loading
const result = await post('/order/create', payload, {
  loading: true,
  loadingText: '提交中...'
})

配置项（setConfig / 单次请求）

快捷方法

工具方法

拦截器用法

请求拦截器

addRequestInterceptor((options) => {
  // 返回修改后的 options 生效
  options.header['X-App-Version'] = '1.0.0'

  // 返回 false 可中断本次请求
  if (!uni.getStorageSync('token')) {
    uni.navigateTo({ url: '/pages/login/login' })
    return false
  }

  return options
})

响应拦截器

addResponseInterceptor((res, options) => {
  const body = res.data

  // 登录失效统一处理
  if (body && body.code === 401) {
    uni.removeStorageSync('token')
    uni.navigateTo({ url: '/pages/login/login' })
  }

  // 返回 undefined 表示不改动，继续走默认解包逻辑
  // 返回其他值会替换 response 对象
  return undefined
})

错误对象结构

请求失败时 catch 到的错误对象：

try {
  await get('/user/info')
} catch (err) {
  if (err.type === 'network') {
    console.log('网络问题')
  } else if (err.type === 'business' && err.code === 401) {
    console.log('需要重新登录')
  }
}

高级用法

失败自动重试

适合弱网环境下的轮询类接口：

await get('/device/status', { id: 'A01' }, {
  retry: 3,
  retryDelay: 800
})

并发请求

const [stats, notices, todos] = await Promise.all([
  get('/dashboard/stats'),
  get('/dashboard/notices'),
  get('/dashboard/todos')
])

静默失败（不弹默认 toast）

await get('/user/check', {}, {
  onError: (err) => {
    console.warn('静默处理：', err)
  }
})

全局关闭错误提示

setConfig({ showErrorToast: false })

实现说明

为什么不用 axios？

小程序端没有 XMLHttpRequest，axios 需要额外适配器且体积较大。直接封装 uni.request 能获得最小包体积与最好的多端一致性。

loading 为什么要计数？

如果两个请求同时发起、各自调用 showLoading / hideLoading，先完成的那个会提前关掉 loading，用户看到的加载态就断了。组件内部用 loadingCount 计数，只有计数归零时才真正隐藏。

请求拦截器必须返回 options

拦截器函数的返回值决定后续行为：

• 返回修改后的 options → 生效
• 返回 false → 中断请求（Promise.reject）
• 返回 undefined → 保持原 options 不变

successCode 设为 null 的场景

如果后端返回的是裸数据（没有 code / msg 包装），把 successCode 设为 null 可跳过业务层校验，直接返回响应体。

平台兼容

App (vue / nvue)、H5、全平台小程序均支持。

隐私与权限

本插件仅在开发者配置的服务器地址内收发请求，自身不采集、不上传任何数据。网络请求权限由宿主应用统一申请。