Android端React Navigation请求未完成时无法跳转问题如何修复？

排查主线程阻塞根源 #

• 先确认axios请求是异步执行：检查是否误开启了async: false这类同步配置，同步请求会直接卡死主线程，导致除系统级滚动外的所有UI操作都得等请求结束才响应。
• 检查请求回调/拦截器里的代码：如果then/catch里有大量DOM操作、循环计算这类同步逻辑，OPPO的WebView对这种阻塞的容忍度比Pixel模拟器低，建议把这类逻辑丢到setTimeout或者Web Worker里异步执行。

替换beforeRemove，用可靠的请求取消方案 #

既然beforeRemove会被阻塞没法及时触发，直接在路由跳转/页面卸载的时机主动终止请求，推荐用axios的AbortController（v0.22.0+可用）：

// 创建控制器实例
const controller = new AbortController();
const signal = controller.signal;

// 发起请求时带上signal
axios.get('/your-api-path', { signal })
  .then(res => { /* 正常处理返回结果 */ })
  .catch(err => {
    if (axios.isCancel(err)) {
      console.log('请求已取消:', err.message);
    } else {
      // 处理其他业务错误
    }
  });

// 在路由守卫里直接触发取消（以Vue的beforeRouteLeave为例）
router.beforeRouteLeave((to, from, next) => {
  controller.abort('页面跳转，取消未完成请求');
  next();
});

如果你的axios版本较低，用旧版的CancelToken也可以实现：

const CancelToken = axios.CancelToken;
let cancelRequest;

axios.get('/your-api-path', {
  cancelToken: new CancelToken(c => {
    cancelRequest = c;
  })
});

// 路由离开时执行取消操作
router.beforeRouteLeave((to, from, next) => {
  cancelRequest('页面跳转，取消未完成请求');
  next();
});

OPPO机型专属优化 #

• 避免在滚动事件中绑定复杂逻辑：OPPO部分机型的WebView把滚动操作优先级拉得很高，但如果滚动时伴随同步计算或DOM操作，会加重主线程负担。
• 检查WebView版本：建议用户将系统WebView更新到最新版，旧版本可能存在主线程调度的底层bug。

内容的提问来源于stack exchange，提问作者marko