
vue.js定时任务:根据时间动态调整api参数
在Vue.js应用中,定时调用API获取数据很常见。有时,API参数需要根据当前时间动态调整。例如,本文演示如何实现:下午5点前,API参数使用当天日期;5点后,使用次日日期。
核心在于根据当前时间动态生成API请求参数并触发定时任务。 setInterval函数用于定时调用,Date对象获取当前时间,判断是否超过下午5点。
以下代码片段展示实现方法:
const runHandler = () => {
setInterval(() => {
const now = new Date();
const hour = now.getHours();
const dateString = hour < 17 ? formatDate(now) : formatDate(addDays(now, 1));
runHttpRequest(dateString);
}, 60000); // 每分钟执行一次
};
const formatDate = (date) => {
// 使用合适的日期格式化函数,例如moment.js
return moment(date).format('YYYY-MM-DD');
};
const addDays = (date, days) => {
const newDate = new Date(date);
newDate.setDate(newDate.getDate() + days);
return newDate;
};
const runHttpRequest = (date) => {
// 此处编写实际的API请求,使用date作为参数
// 例如:
axios.get('/api/data', { params: { date: date } })
.then(response => {
// 处理API响应
console.log(response.data);
})
.catch(error => {
// 处理错误
console.error(error);
});
};
runHandler(); // 启动定时任务
这段代码定义了runHandler函数,使用setInterval每分钟执行一次。 它获取当前时间,判断小时数,并调用formatDate函数格式化日期(建议使用moment.js等库简化日期操作)。 addDays函数计算次日日期。 runHttpRequest函数执行实际的API调用,使用格式化后的日期作为参数。 最后,调用runHandler()启动定时任务。
立即学习“前端免费学习笔记(深入)”;
请根据实际项目需求修改和完善代码,例如添加错误处理、调整定时器间隔等。 务必替换/api/data为你的实际API地址,并根据API规范调整请求方法和参数。 记得安装moment.js: npm install moment










