当前位置：首页 > news >正文

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

news 2025/8/11 5:19:53

还在 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，不占用额外空间
功能基础，需要手动封装

代码示例：

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: https://www.npmjs.com/package/@uni-helper/uni-network
GitHub: https://github.com/uni-helper/uni-network

安装方法：

# npm
npm install @uni-helper/uni-network# yarn
yarn add @uni-helper/uni-network# pnpm
pnpm add @uni-helper/uni-network

代码示例：

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: https://www.npmjs.com/package/@uni-helper/axios-adapter
GitHub: https://github.com/uni-helper/axios-adapter

安装方法：

# 需要同时安装axios和适配器
npm install axios @uni-helper/axios-adapter# 或使用其他包管理器
yarn add axios @uni-helper/axios-adapter
pnpm add axios @uni-helper/axios-adapter

代码示例：

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
体积小，性能优异

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

下载地址：

NPM: https://www.npmjs.com/package/alova
GitHub: https://github.com/alovajs/alova
官网: https://alova.js.org/

安装方法：

# 核心库
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

代码示例：

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'))