uni-app 网络请求终极选型：uni.request、axios、uni-network、alova 谁才是你的真命请求库？

还在 uni-app 里手写 uni.request 然后自己封装到怀疑人生？

想用 axios 却担心小程序 2 MB 主包瞬间爆炸？

面对 alova、uni-network、axios 一脸懵，不知道选哪个才不踩坑？

这篇一次讲透 4 大主流方案优缺点、适用场景和避坑指南，让你 3 分钟选对请求库，节省 3 天踩坑时间！

方案概览

方案	优点	缺点	适用场景
uni.request	零依赖，体积小	功能基础，需手动封装	简单项目
uni-network	axios 语法，轻量	缺少请求策略库	熟悉 axios
axios + adapter	生态完整，兼容性好	体积较大，缺少请求策略库	坚持使用 axios
alova	高性能，自动优化	相对较新，生态仍需探索	请求+请求策略库

axios和uni-network也可以搭配请求策略库 @tanstack/query 使用，参考文章在uni-app中使用vue-query

方案介绍

1. uni.request（官方原生）

特点：

官方原生API，零依赖
体积为0KB，不占用额外空间
功能基础，需要手动封装

代码示例：

javascript 复制代码

export const getUser = (id) =>
  new Promise((resolve, reject) => {
    uni.request({
      url: `https://api.xxx.com/user/${id}`,
      success: (res) => resolve(res.data),
      fail: reject
    })
  })

2. @uni-helper/uni-network

项目特点：

提供类似axios的API语法，降低学习成本
专为uni-app设计，支持全端适配（H5、小程序、App）
轻量级设计
支持拦截器、请求/响应转换等常用功能
原生TypeScript支持，类型定义完善

项目目标： 为熟悉axios的开发者提供无缝迁移体验，在uni-app环境中享受axios般的开发体验。

与axios的对比优势：

体积更小：节省宝贵的小程序空间
原生适配：专为uni-app设计，避免小程序环境下的兼容性问题
TypeScript友好：无需修改类型定义，开箱即用的完善类型支持
稳定性更高：不会出现axios在小程序内的底层功能报错问题

下载地址：

NPM: www.npmjs.com/package/@un...
GitHub: github.com/uni-helper/...

安装方法：

bash 复制代码

# npm
npm install @uni-helper/uni-network

# yarn
yarn add @uni-helper/uni-network

# pnpm
pnpm add @uni-helper/uni-network

代码示例：

javascript 复制代码

import { un } from '@uni-helper/uni-network'
export const getUser = (id) => un.get(`/user/${id}`).then(r => r.data)

3. axios + 适配器

项目特点：

为axios提供uni-app适配器，让axios能在uni-app环境中正常工作
完全兼容axios的所有功能和插件生态
支持所有axios的高级功能：拦截器、取消请求、并发控制等
体积约20KB（包含axios）

项目目标： 让现有的axios代码能够直接在uni-app中使用，实现Web端和uni-app端的代码复用。

使用注意事项：

体积较大：会占用更多小程序空间，需要权衡包体积限制
兼容性风险：某些axios底层功能可能在小程序环境下报错
TypeScript支持：如需良好的TypeScript体验，可能需要修改大部分类型定义
适用场景：主要适合需要复用大量现有axios代码的项目

下载地址：

NPM: www.npmjs.com/package/@un...
GitHub: github.com/uni-helper/...

安装方法：

bash 复制代码

# 需要同时安装axios和适配器
npm install axios @uni-helper/axios-adapter

# 或使用其他包管理器
yarn add axios @uni-helper/axios-adapter
pnpm add axios @uni-helper/axios-adapter

代码示例：

javascript 复制代码

import axios from 'axios'
import { createUniAppAxiosAdapter } from '@uni-helper/axios-adapter'
axios.defaults.adapter = createUniAppAxiosAdapter()
export const getUser = (id) => axios.get(`/user/${id}`).then(r => r.data)

4. alova

alova是一个极致高效的请求工具集，提供了多种请求策略。

项目特点：

下一代请求工具，专注于提升请求体验
内置智能缓存策略，自动去重相同请求
支持请求共享、静默提交、分页缓存等高级功能
提供类似SWR的数据获取hooks
体积小，性能优异

项目目标： 解决传统请求库在复杂场景下的性能和用户体验问题，提供更智能的请求解决方案。

下载地址：

安装方法：

bash 复制代码

# 核心库
npm install alova

# uni-app适配器
npm install @alova/adapter-uniapp

# 完整安装命令
npm install alova @alova/adapter-uniapp

# 使用其他包管理器
yarn add alova @alova/adapter-uniapp
pnpm add alova @alova/adapter-uniapp

代码示例：

typescript 复制代码

import { createAlova, useRequest } from 'alova'
import { uniappAdapter } from '@alova/adapter-uniapp'

const alova = createAlova({
  baseURL: 'https://api.xxx.com',
  ...uniappAdapter(),
  responded: r => r.data
})

export const getUser = (id: string) => alova.Get(`/user/${id}`)

// 页面内使用
const { data, loading } = useRequest(getUser('123'))

场景选择

简单选择建议

简单项目 → uni.request
熟悉 axios → @uni-helper/uni-network
坚持使用 axios → axios + adapter
网络请求+请求策略库 → alova

axios vs @uni-helper/uni-network 深度对比

作为最常见的选择对比，axios和@uni-helper/uni-network各有优劣：

axios的问题

兼容性问题：axios面向浏览器和Node.js设计，即使使用adapter，某些底层功能也可能在小程序内报错
体积负担：axios体积较大（≈20KB），会占用宝贵的小程序空间
TypeScript体验：如果想要获得良好的TypeScript支持，需要修改axios大部分类型定义

@uni-helper/uni-network的优势

原生适配：专为uni-app环境设计，完美支持H5、小程序、App全端
轻量高效：体积小，轻量高效，不会增加包体积负担
TypeScript友好：原生TypeScript支持，无需额外配置
API兼容：保持axios风格的API设计，学习成本低

选择建议

如果你习惯使用axios，并且希望在小程序内获得更好的兼容性和性能，那么@uni-helper/uni-network是一个很好的选择。

新项目：推荐使用@uni-helper/uni-network，享受更好的性能和稳定性
迁移项目：如果现有大量axios代码，可考虑axios + adapter方案
小程序为主：强烈推荐@uni-helper/uni-network，避免兼容性问题
TypeScript项目：@uni-helper/uni-network提供更好的开发体验

如果你喜欢 alova 的请求策略，那么 alova 是一个很好的选择。在WotDemo我们引入了alova，大家可以参考。

常见问题

1. 小程序域名白名单

小程序需要在微信公众平台配置服务器域名，否则真机运行会报错。

2. H5 跨域问题

本地开发时可在 manifest.json 中配置 proxy 解决跨域。

3. 包体积控制

微信小程序主包限制 2MB，选择合适的请求库很重要。

4. TypeScript 支持

推荐使用 alova 或 @uni-helper/uni-network，都有完善的 TypeScript 支持。

告别 HBuilderX，拥抱现代化！这个模板让 uni-app 开发体验起飞

在uni-app中使用@tanstack/query

WotUI 1.10.0 + Wot Demo 重磅发布！

关于uni-app 网络请求库，欢迎讨论👇

uni-app 网络请求终极选型：uni.request、axios、uni-network、alova 谁才是你的真命请求库？

方案概览

方案介绍

1. uni.request（官方原生）

2. @uni-helper/uni-network

3. axios + 适配器

4. alova

场景选择

简单选择建议

axios vs @uni-helper/uni-network 深度对比

axios的问题

@uni-helper/uni-network的优势

选择建议

常见问题

1. 小程序域名白名单

2. H5 跨域问题

3. 包体积控制

4. TypeScript 支持

相关文章