当前位置：首页 > article >正文

在 Vue 中实现与优化轮询技术

article 2024/11/13 15:55:12

轮询（Polling）是一种计算机程序反复检查某个条件或状态的技术，通常用于在一定的时间间隔内不断请求信息或更新数据状态。轮询被广泛应用于前端开发（例如实现页面实时更新）、后端服务监控、网络设备状态检查等场景。

1. 轮询的工作原理

轮询的核心思想是定时发出请求，检查某一状态是否发生变化。但满足某个条件（如状态改变或数据达到期望值）时，轮询停止；否则继续轮询。

轮询可以分为两种主要类型：

1）定时轮询（Fixed Interval Polling）：每隔固定时间间隔发送一次请求。

2）指数退避轮询（Exponential Backoff Polling）：初始时间间隔较短，随着轮询次数增加，逐渐延长时间间隔。这种方法适合减少频繁请求带来的服务器压力。

2. 轮询的实现方法

轮询的实现方法主要有两种：

1）简单轮询：每隔一段固定的时间发送请求，不管上一次请求是否完成。

2）智能轮询（长轮询）：等待上一次请求完成后再发送下一个请求，避免过多的重复请求。

2.1 使用 setInterval

使用 setInterval 可以简单实现定时轮询，适用于较简单的应用场景。

🌰

function pollData() {
  const intervalId = setInterval(async () => {
    const response = await fetch('/api/data');
    const data = await response.json();
    if (data.status === 'complete') {
      console.log('Data is ready:', data);
      clearInterval(intervalId); // 停止轮询
    } else {
      console.log('Polling...'); // 状态未完成，继续轮询
    }
  }, 2000); // 每 2 秒检查一次
}
pollData();

2.2 使用 setTimeout

相比 setInterval，setTimeout 的优势在于可以在每次请求完成后再触发下一次请求，以确保在处理完前一个请求前不会再发起新的请求。

🌰

function pollData() {
  const poll = async () => {
    const response = await fetch('/api/data');
    const data = await response.json();
    if (data.status === 'complete') {
      console.log('Data is ready:', data);
    } else {
      console.log('Polling...');
      setTimeout(poll, 2000); // 继续轮询
    }
  };
  poll();
}
pollData();

2.3 使用递归函数

递归函数配合 async/await 是一种更灵活的轮询方式，适合处理复杂业务逻辑，例如动态改变轮询间隔或异常处理。

🌰

async function pollData(interval) {
  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    if (data.status === 'complete') {
      console.log('Data is ready:', data);
    } else {
      console.log('Polling...');
      setTimeout(() => pollData(interval), interval); // 递归调用
    }
  } catch (error) {
    console.error('Error during polling:', error);
    setTimeout(() => pollData(interval), interval); // 错误处理后继续轮询
  }
}

pollData(2000);

2.4 指数退避轮询

指数退避（Exponential Backoff）轮询通过延长每次请求间隔降低频繁请求带来的服务器压力。这种方式可以在网络较差或服务器响应慢的情况下应用。

🌰

async function pollData(interval = 1000, maxInterval = 30000) {
  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    if (data.status === 'complete') {
      console.log('Data is ready:', data);
    } else {
      console.log('Polling...');
      const nextInterval = Math.min(interval * 2, maxInterval); // 动态增长轮询间隔
      setTimeout(() => pollData(nextInterval), nextInterval);
    }
  } catch (error) {
    console.error('Error during polling:', error);
    setTimeout(() => pollData(interval), interval); // 错误后继续轮询
  }
}

pollData();

2.5 带最大尝试次数

为了防止无限轮询，可以设置一个最大尝试次数，在达到限制后停止轮询。这样可以避免请求过多给服务器带来的压力。

🌰

async function pollData(maxAttempts = 10, interval = 2000) {
  let attempts = 0;
  const poll = async () => {
    if (attempts >= maxAttempts) {
      console.log('Reached maximum attempts, stopping polling.');
      return; // 停止轮询
    }
    attempts += 1;
    try {
      const response = await fetch('/api/data');
      const data = await response.json();
      if (data.status === 'complete') {
        console.log('Data is ready:', data);
      } else {
        console.log(`Polling attempt ${attempts}`);
        setTimeout(poll, interval);
      }
    } catch (error) {
      console.error('Polling error:', error);
      setTimeout(poll, interval); // 错误后继续轮询
    }
  };
  poll();
}
pollData();

3. 结合 Vue 的轮询

在 Vue 中，轮询是一种实现周期性获取服务器数据的方式，通过定时器在组件的生命周期中执行。轮询在 Vue 项目中的实现与普通 JavaScript 轮询方法类似，但借助 Vue 的生命周期钩子和响应式特性，可以更加方便地管理轮询的开启、暂停和停止。

举个 🌰

假设需要每隔 5 秒从服务器端获取一次数据，并在组件销毁时停止轮询。

创建一个 Vue 组件并添加轮询逻辑

<template>
  <div>
    <h1>轮询示例</h1>
    <p>数据：{{ data }}</p>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue'
export default {
  name: 'Polling',
  setup() {
    const data = ref(null)
    let pollingInterval = null
    // 定义获取数据的方法
    const fetchData = async () => {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts')
        const result = await response.json()
        data.value = result
      } catch (error) {
        console.error('数据获取失败:', error)
      }
    }
    // 启动轮询
    const startPolling = () => {
      fetchData() // 初次获取
      pollingInterval = setInterval(fetchData, 5000) // 每隔5秒获取一次
    }
    // 停止轮询
    const stopPolling = () => {
      if (pollingInterval) {
        clearInterval(pollingInterval)
        pollingInterval = null
      }
    }
    // 在组件挂载时启动轮询，在组件卸载时停止轮询
    onMounted(startPolling)
    onUnmounted(stopPolling)
    return {
      data
    }
  }
}
</script>

扩展功能：动态轮询间隔和停止条件

在实际项目中，可能需要更灵活的控制。比如，可以在组件中添加逻辑，根据条件动态调整轮询间隔，或在特定情况下自动停止轮询。

举个 🌰

<template>
  <div>
    <h1>轮询示例</h1>
    <p>数据：{{ data }}</p>
    <button @click='changeActive'>按钮</button>
  </div>
</template>
<script>
import { ref, onMounted, onUnmounted, watch } from 'vue';
export default {
  name: 'ConditionalPollingExample',
  setup() {
    const data = ref(null);
    const isActive = ref(true); // 轮询开关
    let pollingInterval = null;
    const fetchData = async () => {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts');
        const result = await response.json();
        data.value = result;
      } catch (error) {
        console.error('数据获取失败:', error);
      }
    };
    const startPolling = () => {
      fetchData();
      pollingInterval = setInterval(fetchData, 5000);
    };
    const stopPolling = () => {
      if (pollingInterval) {
        clearInterval(pollingInterval);
        pollingInterval = null;
      }
    };
    // 动态控制轮询
    watch(isActive, (newVal) => {
      if (newVal) {
        startPolling();
      } else {
        stopPolling();
      }
    });
    // 可以通过控制 isActive 启动或停止轮询
    const changeActive = () => {
      isActive.value = !isActive.value;
    };
    onMounted(() => {
      if (isActive.value) startPolling();
    });
    onUnmounted(stopPolling);
    return {
      data,
      changeActive,
    };
  },
};
</script>

🌰 中，通过 isActive 响应式变量来控制轮询的开启和停止。watch 监听 isActive 的值变化，当为 true 时启动轮询，false 时停止轮询。