uni-app H5跳转页面经常偶尔会出现”连接服务器超时，点击屏幕重试“

uni-app H5跳转页面经常偶尔会出现”连接服务器超时，点击屏幕重试“

操作步骤：

  • 偶尔跳转页面时会出现，暂无法确认触发机制

预期结果：

  • 不出现：连接服务器超时，点击屏幕重试 问题

实际结果：

  • 出现：连接服务器超时，点击屏幕

bug描述：

  • 问题：经常偶尔在切换页面时，出现这个问题，看上去好像加载js失败，请大神求解下

图片

Image 1 Image 2

信息类别 详细信息
产品分类 uniapp/H5
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win11 23h2
HBuilderX类型 正式
HBuilderX版本号 3.96
浏览器平台 微信内置浏览器
浏览器版本 8.0.40
项目创建方式 HBuilderX
App下载地址或H5网址 https://buy.toting.cn/#/

更多关于uni-app H5跳转页面经常偶尔会出现”连接服务器超时，点击屏幕重试“的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

有可能是scss的问题，改用less可能就行了，如果不行，可以看看组件库用的是不是scss，如果是改成less也许就行了。有可能是scss的问题，改用less可能就行了，如果不行，可以看看组件库用的是不是scss，如果是改成less也许就行了。

更多关于uni-app H5跳转页面经常偶尔会出现”连接服务器超时，点击屏幕重试“的实战教程也可以访问 https://www.itying.com/category-93-b0.html


你这种情况应该是在微信开放平台或者公众号后台没有添加一级域名白名单的事，因为是本地调用生产接口，所以会间接性失效。

你这个问题解决了没有，如何解决的? 我也是这个问题?

服务器域名白名单的事

在处理uni-app H5项目中遇到的“连接服务器超时，点击屏幕重试”问题时，这通常与网络请求的处理有关。为了确保网络请求的健壮性，我们可以采取一系列措施，如设置请求超时、重试机制以及友好的用户提示。以下是一个示例代码，展示了如何在uni-app中实现这些功能。

1. 使用uni.request进行网络请求，并设置超时时间

首先，确保你的网络请求设置了合理的超时时间。在uni-app中，uni.request方法允许你指定timeout参数来设置请求超时时间。

uni.request({
    url: 'https://example.com/api/data',
    method: 'GET',
    timeout: 10000, // 设置超时时间为10秒
    success: (res) => {
        console.log('请求成功', res.data);
        // 处理成功响应
    },
    fail: (err) => {
        console.error('请求失败', err);
        // 处理失败响应，如显示错误提示
        showErrorPrompt('连接服务器超时，点击屏幕重试');
    }
});

2. 实现重试机制

为了增强应用的健壮性，可以在请求失败后实现自动重试机制。这里是一个简单的重试逻辑示例：

function requestWithRetry(url, method, data, retries = 3, timeout = 10000) {
    return new Promise((resolve, reject) => {
        let attempt = 0;
        const makeRequest = () => {
            uni.request({
                url,
                method,
                data,
                timeout,
                success: (res) => resolve(res),
                fail: (err) => {
                    attempt++;
                    if (attempt < retries) {
                        console.warn(`尝试第 ${attempt + 1} 次请求`);
                        setTimeout(makeRequest, 2000); // 等待2秒后重试
                    } else {
                        reject(err);
                        showErrorPrompt('连接服务器超时，点击屏幕重试');
                    }
                }
            });
        };
        makeRequest();
    });
}

// 使用重试机制发起请求
requestWithRetry('https://example.com/api/data', 'GET')
    .then(res => {
        console.log('最终请求成功', res.data);
    })
    .catch(err => {
        console.error('所有重试均失败', err);
    });

3. 显示错误提示

showErrorPrompt函数用于显示错误提示给用户，这里假设你有一个自定义的提示组件或方法来实现这一功能。

function showErrorPrompt(message) {
    // 这里根据你的项目实际情况显示错误提示
    uni.showToast({
        title: message,
        icon: 'none',
        duration: 3000
    });
}

通过上述代码，你可以有效地处理网络请求的超时问题，并提供给用户友好的重试机制。注意，实际项目中可能需要根据具体需求调整超时时间、重试次数以及错误提示的实现方式。

回到顶部