uni-app onshow请求数据报错

uni-app onshow请求数据报错

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

操作步骤：

列表页通过onshow来刷新数据，从详情页返回列表页显示下面的错误，当前页面触发onshow不影响
Cannot destructure property ‘firstElementChild’ of ‘rootRef.value’ as it is

预期结果：

正常刷新页面

实际结果：

列表页通过onshow来刷新数据，从详情页返回列表页显示下面的错误
Cannot destructure property ‘firstElementChild’ of ‘rootRef.value’ as it is

bug描述：

列表页通过onshow来刷新数据，从详情页返回列表页显示下面的错误
Cannot destructure property ‘firstElementChild’ of ‘rootRef.value’ as it is


更多关于uni-app onshow请求数据报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

加个延时去请求

更多关于uni-app onshow请求数据报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


image组件也会产生这个bug，如果那个页面中有image，并且可能有v-if之类的显示控制，就会导致错误抛出。 现在只能采用延时控制的方式。

在onShow里加上async await

在 uni-app 中，onShow 生命周期钩子用于监听页面的显示事件。如果你在 onShow 中请求数据时报错，可能的原因有很多。以下是一些常见的排查步骤和解决方法：

1. 检查网络请求代码

确保你的网络请求代码是正确的，并且使用了正确的 API。例如，使用 uni.request 进行请求：

onShow() {
  uni.request({
    url: 'https://example.com/api/data',
    method: 'GET',
    success: (res) => {
      console.log('请求成功', res.data);
    },
    fail: (err) => {
      console.error('请求失败', err);
    }
  });
}

2. 检查网络权限

确保你的应用有权限访问网络。在 manifest.json 中，检查是否配置了网络权限：

{
  "app-plus": {
    "distribute": {
      "android": {
        "permissions": [
          "<uses-permission android:name=\"android.permission.INTERNET\"/>"
        ]
      }
    }
  }
}

3. 检查请求的 URL

确保请求的 URL 是正确的，并且服务器是可访问的。你可以先在浏览器中测试一下这个 URL，看看是否能正常返回数据。

4. 处理异步请求

如果你在 onShow 中使用了异步请求，确保你正确处理了异步操作。例如，使用 async/await：

async onShow() {
  try {
    const res = await uni.request({
      url: 'https://example.com/api/data',
      method: 'GET'
    });
    console.log('请求成功', res.data);
  } catch (err) {
    console.error('请求失败', err);
  }
}

5. 检查错误信息

查看控制台输出的错误信息，通常错误信息会提示具体的错误原因。例如，网络超时、跨域问题、服务器错误等。

6. 跨域问题

如果你在开发环境中遇到跨域问题，可以在服务器端配置 CORS，或者在开发环境中使用代理服务器。

在 manifest.json 中配置代理：

{
  "h5": {
    "devServer": {
      "proxy": {
        "/api": {
          "target": "https://example.com",
          "changeOrigin": true,
          "pathRewrite": {
            "^/api": ""
          }
        }
      }
    }
  }
}

然后在代码中使用代理路径：

uni.request({
  url: '/api/data',
  method: 'GET',
  success: (res) => {
    console.log('请求成功', res.data);
  },
  fail: (err) => {
    console.error('请求失败', err);
  }
});
回到顶部