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]。 为了更好地控制这种动态变化带来的影响，建议开发人员熟悉各种可用的方法及其触发机制，从而能够更加灵活地响应不同的应用场景需求。