uniapp网络请求拦截怎么办解决方法教程

在UniApp开发中，直接使用uni.request虽然简单，但随着业务复杂化，每个接口单独处理Token注入、错误提示和加载状态会导致代码冗余。通过构建一个全局的请求拦截机制，可以将这些通用逻辑集中管理，让业务代码更专注于数据本身。这种模式类似于后端中间件，在请求发出前和响应返回后插入自定义逻辑。

项目结构中独立的网络请求封装文件

关于请求封装结构

UniApp官方并未提供类似Axios的内置拦截器API，因此需要基于Promise对uni.request进行二次封装。核心思路是创建一个独立的工具文件，通常命名为http.js或request.js。该文件导出一个函数，接收URL、方法和参数，内部调用uni.request并返回Promise对象。这样做的目的是将底层API调用与业务逻辑解耦，便于后续统一修改请求基地址或超时时间。

在封装函数内部，首先定义默认的请求配置，如baseURL、timeout和header。接着，利用async/await语法处理异步流程，确保在发送请求前有机会执行预处理逻辑。这种结构不仅支持GET和POST，还能轻松扩展PUT、DELETE等其他HTTP动词，保持接口调用的一致性。

关于请求封装结构

关于请求前的拦截处理

请求拦截的主要任务是在数据发送出去之前进行修改或校验。最常见的场景是身份认证，即从本地存储中获取Token并添加到请求头中。在封装函数的起始位置，读取storage中的token值，若存在则将其赋值给header对象的Authorization字段。这一步确保了所有经过该封装函数的请求都会自动携带身份信息，无需在每个页面重复编写。

除了Token，请求拦截还可以用于添加公共参数，如应用版本号、设备类型或时间戳。这些信息对于后端统计和问题排查非常有价值。同时，可以在此处触发全局的加载状态，例如显示一个顶部进度条或Loading遮罩，提升用户体验。需要注意的是，加载状态的开启应与请求发送紧密绑定，避免因逻辑错误导致界面卡死。

请求发送前的Token注入与Header配置流程

关于响应后的数据处理

当服务器返回数据时，拦截器的另一部分逻辑开始工作。首要任务是判断HTTP状态码和业务状态码。如果HTTP状态码为200，但业务代码表示失败（如Token过期），则需要执行特定的跳转或刷新逻辑。统一在这里处理401未授权错误，可以强制用户重新登录，避免分散在各个页面的错误回调中。

对于常见的网络错误或服务器异常，可以在这里统一弹出Toast提示，告知用户当前网络状况或稍后重试。解析后的数据应直接返回业务需要的字段，而不是整个响应对象，这样组件中接收到的就是干净的数据结构。此外，无论请求成功还是失败，都应在finally块中关闭之前开启的加载状态，确保界面交互的完整性。

统一处理HTTP状态码与业务错误码

关于全局挂载与使用

完成封装后，需要将这个请求函数挂载到Vue原型上，或者作为模块导入使用。在main.js中，将封装好的http函数赋值给Vue.prototype.$http，这样在所有页面和组件中都可以通过this.$http.get或this.$http.post直接调用。这种方式简化了调用路径，使得代码更加简洁。

在实际业务页面中，调用接口时只需传入相对路径和参数，无需关心基地址拼接和Header设置。例如，获取用户信息时，直接调用this.$http.get('/user/info')即可。这种调用方式与直接使用uni.request相比，减少了大量样板代码，提高了开发效率。同时，由于逻辑集中，后续如果需要更换请求库或调整加密方式，只需修改封装文件，无需遍历整个项目。

在main.js中全局挂载请求方法

关于常见注意事项

在使用自定义拦截器时，需注意异步操作的顺序。确保Token读取和Header设置发生在uni.request调用之前。另外，对于不需要拦截的特殊接口，如登录接口本身，可以在封装函数中增加一个开关参数，允许跳过某些预处理步骤。这避免了因循环依赖或逻辑冲突导致的请求失败。

调试阶段，建议在拦截器中加入console.log打印请求和响应的详细信息，包括URL、参数和耗时。这有助于快速定位是前端参数错误还是后端接口问题。生产环境中，应移除这些日志输出，以保持性能和控制台整洁。通过合理配置，这套拦截机制能成为UniApp项目中稳定可靠的基础设施。