uni-app中手机出现uni.request发起一次请求但触发多次请求的情况

发布于 1周前 作者 gougou168 来自 Uni-App

uni-app中手机出现uni.request发起一次请求但触发多次请求的情况

操作步骤:

  • 就是正常的uni.request 发起请求

预期结果:

  • 只请求一次

实际结果:

  • 出现点击一次,但是偶尔发送多次的情况。

bug描述:

  • 有手机出现情况,发送一次请求,但是自动发送多次的情况
  • 看后端的日志,收到的请求
  • 手机信息:
    • 型号名称:华为畅享 50 Pro
    • 型号代码:CTR-ALO0
    • HarmonyOS 版本:4.2.0
    • 序列号:HXKYD22B01001604
    • IMEI:MEID A00000C3BEB21F
    • 处理器:高通骁龙680
    • 运行内存:8.0 GB + 3.0 GB
    • 可用空间: 31.16GB
    • 存储:总容量: 256 GB
    • 屏幕:2388 x 1080

image

项目信息

项目信息 详细信息
产品分类 uniapp/App
PC开发环境 Windows
PC开发环境版本 windows10
HBuilderX类型 正式
HBuilderX版本 4.24
手机系统 Android
手机系统版本 Android 10
手机厂商 华为
手机机型 华为畅享 50 Pro
页面类型 vue
vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

5 回复

这个和手机没关系,自己代码问题


目前就最近华为手机出现俩例情况,其它手机正常,才出现的,以前正常使用,代码方面只发送一次请求,没有做多次循环请求的操作,也没瞬间去点击多次的情况,就只点击一次。而且是在这一手机大部分的请求的出现了点击一次,出现多次请求的情况。

我刚开始也以为代码的问题,所以才是后端查看了日志。包括测试请求情况,代码也检查了没有多次触发请求的情况,如果我们的用户大多数都出现这类情况,那必然是代码方面出问题噶。 目前只有俩例子都是华为的手机。

老哥解决了吗,我也有这个问题

在uni-app中,如果在手机上使用uni.request发起一次请求却触发了多次请求,这通常是由于代码逻辑或事件绑定不当导致的。以下是一些可能导致这种情况的常见原因及其对应的代码示例和解决方法:

1. 重复绑定事件

如果在一个页面或组件的生命周期中多次绑定了同一个事件,那么每次绑定都会触发一次请求。

错误示例

onLoad() {
    this.bindEvent();
},
onShow() {
    this.bindEvent();
},
methods: {
    bindEvent() {
        document.getElementById('myButton').addEventListener('click', this.sendRequest);
    },
    sendRequest() {
        uni.request({
            url: 'https://example.com/api',
            success: (res) => {
                console.log(res.data);
            }
        });
    }
}

解决方法: 确保只在生命周期的适当位置绑定一次事件,或在绑定前检查是否已绑定。

onLoad() {
    this.bindEventOnce();
},
methods: {
    bindEventOnce() {
        const button = document.getElementById('myButton');
        if (!button._isBound) {
            button.addEventListener('click', this.sendRequest);
            button._isBound = true;
        }
    },
    sendRequest() {
        // 同上
    }
}

2. 异步逻辑错误

在某些情况下,异步逻辑可能会导致重复请求,比如在请求结果返回之前再次触发了请求。

错误示例

methods: {
    handleButtonClick() {
        this.sendRequest();
        setTimeout(() => {
            this.sendRequest(); // 可能由于某些条件再次触发
        }, 1000);
    },
    sendRequest() {
        // 同上
    }
}

解决方法: 确保在适当条件下才发起请求,可以使用标志位来控制。

data() {
    return {
        isRequesting: false
    };
},
methods: {
    handleButtonClick() {
        if (!this.isRequesting) {
            this.isRequesting = true;
            this.sendRequest().finally(() => {
                this.isRequesting = false;
            });
        }
    },
    sendRequest() {
        return new Promise((resolve, reject) => {
            uni.request({
                url: 'https://example.com/api',
                success: (res) => {
                    console.log(res.data);
                    resolve();
                },
                fail: (err) => {
                    reject(err);
                }
            });
        });
    }
}

通过这些方法,你可以避免在uni-app中出现uni.request发起一次请求但触发多次请求的情况。

回到顶部