如何在 Vue 组件中用 setInterval 函数来实现每隔一定时间发送请求的功能

今天做项目的过程中，遇到一个需求，具体需求为uniapp连接了读卡器，原本点读卡会发送一次请求，后面发现非常不方便，因为点读卡，但标签未放置到读写器时，会立刻显示读卡失败，此时还需要再次手动点击读卡。操作比较麻烦

建议：要修改一下逻辑。点读卡后，每200-300ms尝试读一次（大概），持续5秒，仍未独到卡，提示失败。读的过程中，随时可以关掉（停止）

于是决定用  setInterval 函数来实现每隔一定时间发送请求的功能。

<view class="form-top">
				<view class="form-left">
					<view class="form-search flex align-center">
						<input v-model="searchValue" class="input" type="text" placeholder="请输入" maxlength="30" />
						
						<view class="form-read flex align-center" @click="openCard()">
							读卡
						</view>
					</view>
				</view>
			</view>

<script>
export default {
  data() {
    return {
      requestStatus: null,
      intervalId: null,
      requestCount: 0
    };
  },
  methods: {
    //关闭弹窗
		closePop() {
			this.showCard = false;
			this.requestCount = 0;
			clearInterval(this.intervalId);
		},
    //读卡弹窗
	openCard() {
				this.requestStatus = null;
				this.requestCount = 0;
				this.showCard = true;
				this.intervalId = setInterval(() => {
					this.requestCount++;
					if (this.requestCount > 20) {
						uni.showToast({
							title: '读卡失败',
							icon: "none",//图标
						});
						this.stopRequest();
						this.showCard = false;
						return;
					}
					this.sendRequest();
				}, 250);
			},
			stopRequest() {
				this.requestCount = 0;
				clearInterval(this.intervalId);
			},
			sendRequest() {
				// 发送请求的代码
				uhfg.readRFID(result => {
					let data = result.data;
					if (result.code == 200) {
						if(data) {
							this.stopRequest();
							this.showCard = false;
							this.$tab.navigateTo(
								`/pages/result?id=${this.farmId}&rfid=${data}`
							);
						}else {
							this.stopRequest();
							this.showCard = false;
							uni.showToast({
								title: '标签无效请重试',
								icon: "none",//图标
							})
						}
					}else {
						this.stopRequest();
						this.showCard = false;
						uni.showToast({
							title: result.message,
							icon: "none",//图标
						})
					}

				});
			},
  }
};
</script>

点击读卡之后，就会持续触发连接操作，如下图（报错忽略，这里没连接，只做演示）

在这个示例中，我们创建了一个名为 startRequest 的方法，它会在按钮被点击时触发。在这个方法中，我们首先将 requestStatus 设置为 null，表示请求尚未开始。然后，我们使用 setInterval 函数创建一个定时器，每隔200ms发送一次请求。在每次请求之前，我们会检查请求次数是否超过了25次，如果超过了，就停止请求，并将requestCount还原为0。如果请求次数没有超过25次，就调用 sendRequest 方法发送请求。

在 sendRequest 方法中，我们使用 setTimeout 函数模拟请求。在这个示例中，我们随机生成一个布尔值，表示请求是否成功。如果请求成功，我们会停止定时器，并关闭弹窗，还原requestCount

另外，我们还创建了一个名为 stopRequest 的方法，它会在另一个按钮被点击时触发，用于停止请求。

在 Vue 组件中实现每隔一定时间发送请求的功能。在实际开发中，根据具体的需求进行更多的配置和数据处理。