uni-app 发布成H5 连接服务器超时 点击屏幕重试 在本机电脑上就没有

在开发uni-app应用并发布为H5时，遇到连接服务器超时的问题通常与多个因素有关，包括网络环境、服务器响应速度、客户端请求配置等。为了提升用户体验，在H5页面增加点击屏幕重试的功能是一个常见的做法。以下是一个简化的实现示例，展示了如何在uni-app中实现这一功能。

1. 设置请求超时和重试机制

首先，在uni-app中使用uni.request进行网络请求时，可以设置timeout属性来指定请求超时时间。同时，我们可以利用Promise的catch机制来处理请求失败的情况，并提示用户重试。

function fetchData(url, params, retries = 3) {
    return new Promise((resolve, reject) => {
        uni.request({
            url: url,
            method: 'GET', // 或 'POST'
            data: params,
            timeout: 10000, // 设置超时时间为10秒
            success: (res) => {
                if (res.statusCode === 200) {
                    resolve(res.data);
                } else {
                    reject(new Error(`Server error: ${res.statusCode}`));
                }
            },
            fail: (err) => {
                if (retries > 0) {
                    setTimeout(() => {
                        fetchData(url, params, retries - 1).then(resolve).catch(reject);
                    }, 1000); // 等待1秒后重试
                } else {
                    reject(new Error('Request failed after retries'));
                }
            }
        });
    });
}

2. 在页面中使用请求函数并处理重试提示

在页面逻辑中，调用fetchData函数，并在请求失败时显示重试提示。可以通过在页面上添加一个覆盖层来实现点击屏幕重试的功能。

<template>
  <view>
    <view v-if="loading">Loading...</view>
    <view v-if="error" class="retry-overlay" @click="retry">
      <text>连接服务器超时，点击屏幕重试</text>
    </view>
    <view v-else>
      <!-- 正常显示数据 -->
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      loading: true,
      error: false,
      data: null
    };
  },
  methods: {
    async loadData() {
      try {
        this.loading = true;
        this.error = false;
        this.data = await fetchData('https://example.com/api', {});
      } catch (err) {
        this.loading = false;
        this.error = true;
      }
    },
    retry() {
      this.loadData();
    }
  },
  mounted() {
    this.loadData();
  }
};
</script>

<style>
.retry-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  font-size: 18px;
}
</style>

这个示例展示了如何在uni-app中实现请求超时后的重试机制，并通过UI提示用户点击屏幕进行重试。注意，实际项目中可能需要根据具体需求调整请求参数、错误处理逻辑以及UI样式。