uni-app 底部tabbar在APP模式下请求接口抛出错误会导致tabbar自动消失

uni-app 底部tabbar在APP模式下请求接口抛出错误会导致tabbar自动消失

开发环境 版本号 项目创建方式
Windows 10 HBuilderX

操作步骤：

使用原生tabbar显示，在vue页面onShow方法里面调用 getlist接口获取数据，因为接口服务器不存在，导致接口抛出 Uncaught (in promise)，然后底下的tabbar就自己消失了。 测试：1。去掉 getlist方法，tabbar正常显示 2。通过延迟执行getlist方法，比如延迟5秒执行。结果：开始TABBAR还存在，接着getlist方法执行，接口抛出错误。tabbar消失。 猜想：tabbar渲染是在获取数据后，再次渲染一遍？ 这个错误不好解决。

预期结果：

数据接口报错，TABBAR正常显示

实际结果：

数据接口报错，TABBAR消失

bug描述：

使用原生tabbar显示，在vue页面onShow方法里面调用 getlist接口获取数据，因为接口服务器不存在，导致接口抛出 Uncaught (in promise)，然后底下的tabbar就自己消失了。 测试：1。去掉 getlist方法，tabbar正常显示 2。通过延迟执行getlist方法，比如延迟5秒执行。结果：开始TABBAR还存在，接着getlist方法执行，接口抛出错误。tabbar消失。 猜想：tabbar渲染是在获取数据后，再次渲染一遍？ 这个错误不好解决。


更多关于uni-app 底部tabbar在APP模式下请求接口抛出错误会导致tabbar自动消失的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

H5模式下没有该问题

更多关于uni-app 底部tabbar在APP模式下请求接口抛出错误会导致tabbar自动消失的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个典型的异步错误导致页面渲染异常的问题。在 uni-app 中，当页面生命周期钩子（如 onShow）中的异步操作发生未捕获的异常时，可能会影响整个页面的渲染状态，包括原生组件如 tabbar。

问题原因：

  1. 未处理的 Promise 拒绝：接口请求失败导致 Uncaught (in promise) 错误，这属于未处理的 Promise 拒绝。
  2. 原生组件渲染依赖：在 App 端，原生 tabbar 的渲染可能与页面生命周期状态绑定。当页面渲染过程中发生未捕获的 JavaScript 异常，可能导致渲染流程中断，进而影响 tabbar 的显示。

解决方案：

1. 捕获异步错误 在调用接口时添加 try-catch 或 catch 处理：

// 方法一：使用 async/await 配合 try-catch
async onShow() {
  try {
    await this.getlist()
  } catch (error) {
    console.error('接口请求失败:', error)
    // 可在此处设置错误状态，不影响页面渲染
  }
}

// 方法二：使用 Promise.catch
onShow() {
  this.getlist().catch(error => {
    console.error('接口请求失败:', error)
  })
}

2. 封装请求方法 确保所有接口请求都有错误处理：

async getlist() {
  try {
    const res = await uni.request({
      url: 'your-api-url',
      // 其他配置
    })
    // 处理数据
  } catch (error) {
    console.error('请求失败:', error)
    // 返回默认值或抛出处理后的错误
    return []
  }
}

3. 全局错误处理 在 app.vue 中添加全局未处理 Promise 拒绝的捕获：

// app.vue
export default {
  onLaunch() {
    // 捕获未处理的 Promise 拒绝
    if (uni.onUnhandledRejection) {
      uni.onUnhandledRejection((error) => {
        console.error('未处理的Promise拒绝:', error)
      })
    }
  }
}

4. 检查页面数据绑定 确保接口错误不会导致页面数据绑定异常：

data() {
  return {
    list: [], // 默认空数组
    loading: false
  }
}
回到顶部