uni.addInterceptor 网络请求
时间: 2025-06-04 20:53:40 浏览: 18
### 使用 `uni.addInterceptor` 进行网络请求拦截
在网络开发过程中,为了增强应用的功能性和安全性,通常会使用到请求拦截器。通过 `uni.addInterceptor` 可以方便地对所有的网络请求进行统一处理,在发送请求前或者接收到响应后执行特定逻辑。
#### 添加全局请求拦截器
对于每一个发出的请求,可以设置一个通用的行为模式来确保一致性操作。下面是一个具体的例子展示如何利用 `uni.addInterceptor` 来创建一个简单的请求拦截器:
```javascript
// 注册 request 拦截器
uni.addInterceptor('request', {
invoke(config) {
console.log("interceptor invoke", config);
// 在这里可以修改配置参数,比如添加公共头部信息等
return config;
},
success(res) {
console.log("interceptor success", res);
// 成功后的回调函数,可以在返回的数据上做进一步加工
return res;
},
fail(err) {
console.log("interceptor fail", err);
// 错误情况下的处理方式
throw new Error(`Request failed with error ${err}`);
},
complete() {
console.log("interceptor complete");
// 不论成功与否都会被执行的操作
}
});
```
这段代码展示了如何定义一个完整的生命周期钩子——从发起请求之前 (`invoke`) 到接收服务器回应之后 (`success`, `fail`) 以及最终完成整个过程 (`complete`).
#### 结合实际场景的应用案例
假设有一个需求是在每次页面加载或切换时自动拉取最新的用户状态信息。这可以通过结合路由变化监听机制与上述提到的请求拦截技术轻松实现:
```javascript
// 假设存在这样一个用于获取用户信息的方法
function fetchUserInfo(){
uni.request({
url: "/api/userInfo",
method:"GET"
}).then((res)=>{
console.log("User Info:", res.data);
});
}
// 当页面发生跳转时触发此事件
uni.$on('pageChange',(toPage)=>{
console.log(`Navigating to page:${toPage.route}`);
// 执行一些初始化工作,如刷新用户资料
fetchUserInfo();
});
// 同样也可以在此处加入请求拦截器...
```
以上就是关于如何在 UniApp 中运用 `uni.addInterceptor` 对 HTTP 请求实施全面控制的方式介绍[^1]。
阅读全文
相关推荐


















