讲师中心 微信公众号
AI工具推荐 视频效率加速

uni-app网络请求request封装教程 uni-app全局拦截器配置

陌瑶小哥_7182

陌瑶小哥_7182

发布时间:2026-05-08 09:29:19

|

1090人浏览过

|

来源于php中文网

原创

uni-app跨端请求封装必须手动封装uni.request,因App端uni.addInterceptor完全无效;需统一处理token异步读取与刷新锁、业务code解析、URL协议补全及header大小写等平台差异。

uni-app网络请求request封装教程 uni-app全局拦截器配置

uni-app 的 request 封装不能只靠 uni.addInterceptor,尤其在 App 端基本无效;真正跨端稳定的方案是手动封装 uni.request 函数,并按需补充拦截逻辑。

App 端 uni.addInterceptor('request') 为什么完全不生效

这不是配置问题,而是底层机制限制:iOS 和 Android 原生容器中,uni.request 调用直接走原生网络模块,绕过 JS 层的拦截器注册逻辑。很多团队上线后才发现 App 上 token 没注入、401 不跳转——查日志发现 invoke 根本没执行。

  • 仅 H5 和微信/支付宝/字节等小程序支持 uni.addInterceptor,且需注意部分低版本小程序兼容性
  • App 端必须把所有请求逻辑收口到自定义函数里,比如 http.get()、http.post()
  • 若项目已混用拦截器和手动封装,容易出现「H5 正常、App 失效、调试时又好像好了」这类时序型 bug

手动封装 uni.request 必须处理的三个异步陷阱

token 读取、刷新、并发 401 是最常崩掉的三处。同步读 uni.getStorageSync('token') 在冷启动或 store 未初始化时返回空,直接导致 401;多个请求同时失败又各自刷新 token,后端可能返回 429 或状态错乱。

uni-app
uni-app

uni-app 是基于 Vue 的跨端开发框架,适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载
  • token 获取应封装为 Promise:优先从 Pinia/Vuex 异步取,fallback 到 uni.getStorageSync,避免时序空值
  • 401 刷新必须加锁:let refreshingPromise = null,后续请求 await 同一个 Promise,而不是重复调 refreshToken()
  • 刷新失败后要重置 refreshingPromise = null,否则后续所有请求永久 pending
  • 示例片段:
    if (res.statusCode === 401) {<br>  if (!refreshingPromise) {<br>    refreshingPromise = refreshToken();<br>  }<br>  await refreshingPromise;<br>  refreshingPromise = null;<br>  // 重发原请求<br>}

后端返回 200 但业务失败?别只看 statusCode

绝大多数真实项目采用「HTTP 状态码恒为 200,靠响应体 code 字段标识业务状态」的约定。如果封装层只判断 res.statusCode === 200 就 resolve,等于把登录过期、权限不足、参数错误全当成成功,前端逻辑会彻底失控。

  • 必须解析响应体,检查 res.data.code(常见值如 0 表示成功,1001 表示 token 过期)
  • 对 code !== 0 的情况统一 reject,并在业务层 .catch() 中处理,而不是在封装层 uni.showToast —— 否则无法做条件重试或静默上报
  • 建议保留原始响应结构,例如 resolve { data: res.data.data, code: res.data.code, msg: res.data.msg },避免信息丢失

uni.request 封装里最容易被忽略的平台差异点

看似简单的 URL 拼接、header 注入,在多端下行为并不一致。比如 H5 支持相对路径,App 端某些安卓机型会自动补 http:// 导致 404;小程序对 header 大小写敏感,authorization 写成小写 iOS 直接丢弃。

  • URL 必须显式判断协议:if (!options.url.startsWith('http')) options.url = BASE_URL + options.url,避免 H5 正常、App 报跨域
  • header 键名统一 PascalCase 或全大写(如 Authorization),不要依赖小写 fallback
  • timeout 在 App 端实测常被系统截断,建议设为 15000 以上并配合业务层重试逻辑
  • App 端 fail 回调中 err.errMsg 可能是 "request:fail timeout" 或 "request:fail net::ERR_CONNECTION_REFUSED",需正则匹配而非全等判断

真正难的不是写完封装,而是在 token 刷新锁、业务 code 解析、平台路径拼接这些细节上保持各端行为一致。一旦漏掉其中一环,线上就可能出现「只有 iPhone 用户登录后白屏」「安卓用户总被反复登出」这类难以复现的问题。

热门AI工具

更多
讯飞绘文

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

火山引擎

火山引擎是一款面向企业的云计算与AI服务平台。

Laper
Laper Hot

Laper是专为编剧、导演和制片人推出的 AI 原生剧本创作工具。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

Atoms
Atoms Hot

Atoms是一款AI智能体工具,第一支自动构建真实业务的 AI 团队。

墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2463

2023.08.11

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

5343

2023.10.09

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

6390

2024.03.19

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

5978

2024.03.22

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

843

2024.05.22

http500解决方法
http500解决方法

http500解决方法有检查服务器日志、检查代码错误、检查服务器配置、检查文件和目录权限、检查资源不足、更新软件版本、重启服务器或寻求专业帮助等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

3403

2023.11.09

http请求415错误怎么解决
http请求415错误怎么解决

解决方法:1、检查请求头中的Content-Type;2、检查请求体中的数据格式;3、使用适当的编码格式;4、使用适当的请求方法;5、检查服务器端的支持情况。更多http请求415错误怎么解决的相关内容,可以阅读下面的文章。

874

2023.11.14

HTTP 503错误解决方法
HTTP 503错误解决方法

HTTP 503错误表示服务器暂时无法处理请求。想了解更多http错误代码的相关内容,可以阅读本专题下面的文章。

6446

2024.03.12

OpenJDK JVM参数怎么调优
OpenJDK JVM参数怎么调优

Java应用运行缓慢,如何调整JVM参数?本专题介绍OpenJDK JVM性能调优的基本流程,涵盖性能指标确认、运行数据采集、内存配置和垃圾回收分析,帮助你先定位瓶颈,再通过对照测试验证效果,避免直接套用参数而影响应用稳定性。

0

2026.10.16

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app从入门到实战教程
uni-app从入门到实战教程

共0课时 | 0人学习

uni-app x harmony开发指南
uni-app x harmony开发指南

共0课时 | 0人学习

uni-app鸿蒙运行和发行
uni-app鸿蒙运行和发行

共0课时 | 0人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn