uni-app中使用axios需指定适配器(如axios-adapter-uniapp)、锁定axios@0.26.0,并在create前挂载;baseURL应设于create中,token在请求拦截器用uni.getStorageSync获取;GET用params、POST用data;上传用FormData且不设Content-Type;loading和提示应由业务层控制而非拦截器。

uni-app 里直接用 axios 会报 adapter is not a function 错误
因为 uni-app 的网络底层是 uni.request,不是浏览器的 XMLHttpRequest 或 Node.js 的 http 模块,axios 默认找不到适配器。不处理就直接白屏或控制台报错。
- 必须安装并显式指定一个适配器:推荐
axios-adapter-uniapp(Vue 2/3 通用)或axios-miniprogram-adapter(微信小程序更稳,尤其 Vue 3 + HBuilderX 4.20+) - 注意 axios 版本:uni-app 小程序环境不兼容 axios ≥1.0,必须锁定
axios@0.26.0,否则即使装了适配器也无效 - 适配器要主动挂载——不能只 import,得在 create 实例前或 defaults 上设好:
axios.defaults.adapter = adapter或adapter: adapter传进create()
封装 request.js 时,baseURL 和拦截器顺序不能乱
很多人把 baseURL 写死在每个 API 调用里,或者在响应拦截器里才去读 token,结果 token 拿不到、接口 401 频发。
-
baseURL必须设在axios.create()里,且建议从环境变量读取(如process.env.VUE_APP_API_BASE),避免测试/生产环境切错地址 - 请求拦截器里加 token,要用
uni.getStorageSync('token'),不是localStorage.getItem(H5 可用,但小程序、App 不行) - 响应拦截器里别直接
return response.data—— 后端返回结构不统一时(比如有时包{ code, data, msg },有时直出数组),这里一统就废了所有异常判断逻辑
GET/POST 参数传法不同,params 和 data 别混用
这是最常导致后端收不到参数的低级错误:uni-app 封装后,很多人照抄 Vue Web 写法,却忽略了 uni-app 环境下 axios 的序列化行为没变,但后端接收逻辑往往依赖参数位置。
-
GET请求用params:它拼在 URL 后,如/user?id=123;POST提交表单类数据,用data(默认序列化为 JSON) - 如果后端要求 POST 也走 URL 查询参数(比如某些老 Spring Boot 接口),就得手动拼:
url: '/api?'+new URLSearchParams(data).toString(),别指望params在 POST 里生效 - 上传文件必须用
FormData,且Content-Type不能手动设(浏览器会自动加 boundary),否则后端解析失败
loading 和 toast 不能写在拦截器里全局硬塞
拦截器是全局的,但 loading 状态和错误提示必须按业务场景开关——比如轮询接口、静默刷新 token、上传进度条,都不该触发全局 loading 或弹窗。
- 拦截器里开
uni.showLoading很危险:多个并发请求进来,uni.hideLoading只能关最后一次,前面的 loading 就卡住 - 正确做法:把 loading 控制权交给调用方,request 层只暴露
showLoading: boolean配置项,默认false;需要时在 API 方法里显式传入 - 错误提示也一样:
Message或uni.showToast应由业务层决定是否弹,拦截器最多做console.error或抛错,别越俎代庖

















