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

場景選擇

簡單選擇建議

• 簡單項目 → uni.request
• 熟悉 axios → @uni-helper/uni-network
• 堅持使用 axios → axios + adapter
• 網絡請求+請求策略庫 → alova

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

作為最常見的選擇對比，axios和@uni-helper/uni-network各有優劣：

axios的問題

1. 兼容性問題：axios面向瀏覽器和Node.js設計，即使使用adapter，某些底層功能也可能在小程序內報錯
2. 體積負擔：axios體積較大（≈20KB），會占用寶貴的小程序空間
3. TypeScript體驗：如果想要獲得良好的TypeScript支持，需要修改axios大部分類型定義

@uni-helper/uni-network的優勢

1. 原生適配：專為uni-app環境設計，完美支持H5、小程序、App全端
2. 輕量高效：體積小，輕量高效，不會增加包體積負擔
3. TypeScript友好：原生TypeScript支持，無需額外配置
4. 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 重磅發布！

評論區開發，關于網絡請求庫，歡迎討論👇