uni.addInterceptor
时间: 2023-12-08 11:14:47 浏览: 88
`uni.addInterceptor` 是一个在 `uni-app` 中用于拦截网络请求的方法。通过该方法,可以在发送网络请求前或者接收到网络响应后对请求和响应进行一些处理,比如添加请求头、修改请求参数、统一处理错误信息等。使用该方法可以方便地对多个请求进行统一的处理,提高了代码的复用性和可维护性。
相关问题
uni.addInterceptor 路由 异步
### 使用 `addInterceptor` 进行路由异步拦截
在 UniApp 中,可以利用 `uni.addInterceptor` 方法来实现对请求的拦截,并在此过程中处理一些必要的逻辑,比如身份验证、权限校验等。此方法允许开发者自定义拦截器,在API调用前或回调执行前后插入特定的操作。
对于希望实现带有异步操作的路由拦截场景,可以通过设置全局导航守卫的方式达成目的。下面是一个简单的例子展示如何通过 `addInterceptor` 来添加一个用于处理登录状态检查的拦截器:
```javascript
// 在 app.vue 的 created 钩子函数内或其他合适位置注册拦截器
export default {
onLaunch() {
// 添加 API 请求拦截器
uni.addInterceptor('request', {
invoke(args) {
console.log('Before request:', args);
},
success(result) {
console.log('Request succeeded with result:', result);
},
fail(error) {
console.error('Request failed due to error:', error);
}
});
// 对于页面跳转类型的拦截(如 navigateTo)
uni.addInterceptor({
invoke(apiName, args){
if (apiName === 'navigateTo' || apiName === 'redirectTo') {
const url = args[0].url;
// 假设这里有一个异步的身份验证过程
checkLoginStatus().then(isLoggedIn => {
if (!isLoggedIn) {
// 如果未登录,则重定向至登录界面
uni.redirectTo({url:'/pages/login/index'});
} else {
// 继续原来的页面跳转动作
originalNavigate(url);
}
});
return false; // 返回false阻止默认行为的发生
}
}
});
function checkLoginStatus(){
// 模拟异步获取登录状态的过程
return new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve(true); // 此处应替换为实际判断逻辑
},1000);
})
}
function originalNavigate(url){
uni.navigateTo({url});
}
}
}
```
上述代码展示了如何使用 `uni.addInterceptor` 注册两个不同类型的拦截器:一个是针对所有网络请求(`request`)的一般性拦截;另一个则是专门用来处理页面间跳转事件(navigateTo/ redirectTo),其中包含了模拟的异步认证流程[^1]。
值得注意的是,当涉及到页面间的转换时,由于这些操作本质上是非同步的,因此可能需要特别小心地管理好它们之间的顺序以及可能出现的竞争条件等问题。此外,考虑到用户体验,应当尽可能减少不必要的延迟,并提供清晰的状态反馈给用户。
#### 处理页面栈变化
每当应用程序中的路由发生变化时,UniApp 应用程序内部维护着一个表示当前显示页面列表的数据结构——即所谓的“页面栈”。随着用户的交互活动,这个栈会相应地增长或缩小,具体取决于所采取的动作是前进还是回退[^2]。
为了更好地控制这种动态变化带来的影响,建议开发人员熟悉各种可用的方法及其触发机制,从而能够更加灵活地响应不同的应用场景需求。
uni.addInterceptor 网络请求
### 使用 `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]。
阅读全文
相关推荐
















