前端工具集

Appearance

🔄 轮询管理器 ​

智能的轮询请求管理工具，支持 Vue3、React 等主流框架，让轮询操作变得简单可靠

📖 概述 ​

这里提供三个版本的轮询 hook，分别为 Vue3、Vue2、React 版本，为不同技术栈的开发者提供统一的轮询解决方案。

🎯 为什么要封装这几个 hook 呢 ​

🎯 封装目的 ​

在前后端分离的开发中，我们经常遇到需要轮询接口获取状态的场景，比如：

  • 文件上传进度查询
  • 订单状态跟踪
  • 异步任务执行状态监控
  • 实时数据更新

传统的轮询实现往往存在以下问题：

  • 代码重复，每个项目都要重新写一遍
  • 状态管理混乱，难以维护
  • 缺乏统一的错误处理和生命周期管理
  • 内存泄漏风险，组件卸载后轮询仍在运行

🚀 设计理念 ​

我们的轮询管理器遵循以下设计原则：

  1. 统一接口: 三个框架版本保持一致的 API 设计，降低学习成本
  2. 状态管理: 提供完整的轮询状态响应式数据，包括运行状态、暂停状态、轮询次数等
  3. 生命周期管理: 自动处理组件卸载时的资源清理，防止内存泄漏
  4. 灵活配置: 支持自定义轮询条件、间隔时间、最大次数等配置
  5. 错误边界: 完善的错误处理机制，确保轮询异常不会影响应用稳定性

✨ 核心特性 ​

  • 智能轮询: 支持条件判断，满足条件时自动停止轮询
  • 状态控制: 提供开始、停止、暂停、恢复、重置等完整控制方法
  • 回调系统: 丰富的回调函数支持，包括成功、错误、完成、状态变化等
  • 自动清理: 组件卸载时自动销毁轮询管理器
  • 类型安全: 完整的 TypeScript 类型定义支持
  • 性能优化: 内部使用 100ms 定时器同步状态，确保响应式数据及时更新
  • 防抖节流: 内置防抖和节流控制，避免频繁请求
  • 并发控制: 支持多个轮询任务并发执行

🔧 技术实现 ​

  • Vue3: 基于 Composition API 和 ref、computed 等响应式特性
  • Vue2: 基于 Options API 和 Vue.observable 实现响应式
  • React: 基于 Hooks 和 useState、useEffect 等原生 Hook

📚 使用场景 ​

适用于以下业务场景：

  • 文件上传/下载进度监控
  • 订单状态实时跟踪
  • 异步任务执行状态查询
  • 实时数据同步更新
  • 支付状态轮询确认
  • 系统健康状态监控
  • 聊天消息轮询
  • 游戏状态同步

🚀 快速开始 ​

Vue3 版本 ​

typescript
import { usePolling } from "@fe-tools/polling-manager-vue3";

const { start, stop, isPolling } = usePolling({
  request: fetchOrderStatus,
  interval: 5000,
  immediate: true,
});

React 版本 ​

typescript
import { usePolling } from "@fe-tools/polling-manager-react";

const { start, stop, isPolling } = usePolling({
  request: fetchOrderStatus,
  interval: 5000,
  immediate: true,
});

📚 文档导航 ​

🔧 技术架构 ​

核心组件 ​

  1. 轮询引擎: 负责定时执行请求和状态管理
  2. 状态管理器: 管理轮询的各种状态（运行、暂停、停止等）
  3. 生命周期管理器: 处理组件的挂载和卸载
  4. 错误处理器: 统一的错误处理和重试机制
  5. 资源清理器: 自动清理定时器和事件监听器

设计模式 ​

  • 观察者模式: 通过回调函数处理各种状态变化
  • 状态机模式: 管理轮询的不同状态和状态转换
  • 策略模式: 可配置的轮询策略和错误处理策略

🚀 性能特性 ​

  • 低内存占用: 智能的资源管理，最小化内存占用
  • 高效定时器: 优化的定时器实现，减少 CPU 占用
  • 智能清理: 自动清理无用资源，防止内存泄漏
  • 批量更新: 批量处理状态更新，提高渲染性能

🔒 安全特性 ​

  • 请求验证: 内置的请求参数验证
  • 错误隔离: 轮询错误不会影响其他功能
  • 资源限制: 可配置的最大轮询次数和频率限制
  • 超时控制: 防止请求长时间挂起

📊 监控和调试 ​

  • 轮询状态: 实时监控轮询运行状态
  • 性能指标: 轮询频率、成功率、响应时间等
  • 错误日志: 详细的错误信息和重试记录
  • 调试模式: 开发环境下的详细日志输出

🎨 最佳实践 ​

1. 合理设置轮询间隔 ​

typescript
// 根据业务需求设置合适的轮询间隔
const { start } = usePolling({
  request: fetchData,
  interval: 5000, // 5秒间隔，避免过于频繁
  maxRetries: 3, // 最大重试次数
});

2. 使用条件轮询 ​

typescript
// 满足条件时自动停止轮询
const { start } = usePolling({
  request: fetchOrderStatus,
  condition: (data) => data.status === "completed",
  interval: 2000,
});

3. 及时清理资源 ​

typescript
// 组件卸载时自动清理，无需手动处理
onUnmounted(() => {
  // 轮询管理器会自动清理资源
});

🤝 社区支持 ​

如果您在使用过程中遇到问题，可以通过以下方式获取帮助：

  • 📖 文档: 仔细阅读相关文档
  • 🔍 搜索: 使用页面右上角的搜索功能
  • 💬 GitHub Issues: 提交问题
  • 📧 邮件支持: 发送邮件到项目维护者

📈 更新日志 ​

查看最新的功能更新和 bug 修复：更新日志

开始使用 → 查看 Vue3 文档 | 查看 React 文档

Released under the ISC License.

Copyright © 2024-present gaojh1026