一、实战目标与应用场景
需求背景
周期性请求接口在前端应用中非常常见，尤其是需要获取最新数据的场景。通过实现固定时间间隔的触发，可以维持数据的时效性，同时确保资源的高效利用。
本教程聚焦在Vue.js环境内，通过组合式 API 实现定时触发，并在每次触发时使用动态传参，以适应不同场景如当前用户、筛选条件或设备状态的变化。
二、技术栈与环境准备
核心依赖与版本
采用 Vue 3 为基础框架，配合 Axios 进行网络请求，搭配 Vite 或其他现代构建工具。通过npm install axios安装依赖，确保浏览器端能够发起请求。
为了实现清晰的状态管理，我们将响应式数据、加载态与错误态分离，方便在模板中直接绑定显示。
三、实现思路与架构设计
定时触发的核心逻辑
核心目标是构建一个可控的定时任务，在固定时间间隔触发对接口的调用。为避免组件卸载后定时器仍在运行，需要在<onUnmounted 针对定时器进行清理，确保内存安全。
实现中要求：每次请求的参数对象应是全新副本，避免引用污染或意外的传参复用，从而确保每次请求都携带准确上下文信息。
动态传参策略
动态传参的要点是把需要的上下文信息放入<param对象的字段，并在每次触发时更新。常用字段包括：当前用户ID、筛选条件、时间戳等。
为了提升可维护性，推荐把参数构建逻辑封装成独立函数，使不同页面或组件都可复用相同的传参规则。
四、实战代码示例
基本实现：定时触发与数据获取
下面的示例展示了如何在 Vue 3 组件中设置固定间隔的定时器，并在每次触发时更新参数后发起请求。注意：定时器的创建与销毁应绑定到组件生命周期，以避免内存泄漏。
代码中，我们使用响应式数据来绑定模板状态，并在每次触发时更新参数以实现动态传参。
import { ref, onMounted, onUnmounted } from 'vue'
import axios from 'axios'export default {setup() {const intervalMs = 5000const data = ref(null)const loading = ref(false)const error = ref(null)const param = ref({ userId: 123, t: Date.now() })let timer = nullconst fetchData = async () => {loading.value = trueerror.value = nulltry {const res = await axios.get('/api/data', { params: param.value })data.value = res.data} catch (e) {error.value = e} finally {loading.value = false}}onMounted(() => {// 立即执行一次fetchData()timer = setInterval(() => {// 每次触发更新动态参数param.value = { userId: getCurrentUserId(), t: Date.now() }fetchData()}, intervalMs)})onUnmounted(() => {if (timer) clearInterval(timer)})function getCurrentUserId() {// 实际场景应从权限/会话中获取return 123}return { data, loading, error }}
}扩展：带取消请求与节流
在高并发场景中，可能需要对前一次请求进行取消，以节省带宽并保持数据一致性。下面的实现演示了通过<AbortController来取消未完成的请求，并在下一轮触发时重新发起。通过这种方式实现了请求的取消与节流效果。
import { ref, onMounted, onUnmounted } from 'vue'
import axios from 'axios'export default {setup() {const intervalMs = 7000const data = ref(null)const loading = ref(false)const error = ref(null)let timer = nulllet controller = nullconst param = ref({ userId: 456, q: 'active' })const fetchData = async () => {// 取消上一次请求if (controller) controller.abort()controller = new AbortController()loading.value = trueerror.value = nulltry {const res = await axios.get('/api/data', {params: param.value,signal: controller.signal})data.value = res.data} catch (e) {if (e.name === 'AbortError') {// 请求被取消，不视为错误} else {error.value = e}} finally {loading.value = false}}onMounted(() => {// 初次执行fetchData()timer = setInterval(() => {param.value = { userId: getCurrentUserId(), t: Date.now() }fetchData()}, intervalMs)})onUnmounted(() => {if (timer) clearInterval(timer)if (controller) controller.abort()})function getCurrentUserId() {return 789}return { data, loading, error }}
}五、在 Vue 组件中集成与优化
组合式函数封装：复用能力
为实现高内聚、低耦合，建议将“定时触发、参数构建、数据获取”等逻辑封装成一个自定义 Hook/Composable，以便在不同页面重复使用。通过将定时器控制、参数构建和数据状态分离，能够快速在任意组件中组装周期性 API 调用器。
在组合式函数中，结合ref、onMounted、onUnmounted等 API，确保生命周期正确，避免内存泄漏与意外的重复触发。
import { ref, onMounted, onUnmounted } from 'vue'export function usePeriodicApi(fetchFn, intervalMs = 5000) {const data = ref(null)const loading = ref(false)const error = ref(null)let timer = nulllet param = ref({})const start = () => {timer = setInterval(async () => {loading.value = truetry {const res = await fetchFn(param.value)data.value = res} catch (e) {error.value = e} finally {loading.value = false}}, intervalMs)}const stop = () => {if (timer) clearInterval(timer)}onMounted(start)onUnmounted(stop)const setParam = p => (param.value = p)return { data, loading, error, start, stop, setParam }
}
将组合式函数和组件结合使用
在实际项目中，可以将上述组合式函数与 UI 交互结合，例如通过表单控件修改传参、触发手动刷新等。通过将setParam与watch或表单事件绑定，可以实现对传参的即时响应。
最终的结构保持清晰，数据驱动的 UI 将对用户操作给出快速反馈，同时接口调用在组件销毁后不会遗留未完成任务。
