Vue.js项目中如何实现每天定时调用接口，并根据17点前后传递不同日期参数？-html教程-PHP中文网

Vue.js项目中如何实现每天定时调用接口，并根据17点前后传递不同日期参数？

DDD

发布： 2025-03-03 15:04:10

原创

612人浏览过

在vue.js项目中，如何实现每天定时调用接口，并在下午17点前后传递不同的日期参数？本文将详细讲解如何在vue.js项目中，以下午17点为分界点，在17点前传递当天日期，17点后传递次日日期给接口。

Vue.js项目中如何实现每天定时调用接口，并根据17点前后传递不同日期参数？

核心在于获取当前时间，并根据时间进行条件判断，然后调用接口并传递相应参数。以下是关键代码片段：

const runHandler = () => setInterval(() => {
    const now = new Date(),
          hour = now.getHours();
    let targetDate;
    if (hour < 17) {
        targetDate = getToday();
    } else {
        targetDate = getTomorrow();
    }
    runHttpRequest(targetDate);
}, 1000); // 每秒执行一次

const getToday = () => {
    const date = new Date();
    return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
};

const getTomorrow = () => {
    const tomorrow = new Date();
    tomorrow.setDate(tomorrow.getDate() + 1);
    return `${tomorrow.getFullYear()}-${(tomorrow.getMonth() + 1).toString().padStart(2, '0')}-${tomorrow.getDate().toString().padStart(2, '0')}`;
};

const runHttpRequest = (date) => {
    //  此处编写你的接口调用代码，将date参数传递给接口
    //  例如：
    fetch(`/api/endpoint?date=${date}`)
        .then(response => response.json())
        .then(data => {
            // 处理接口返回的数据
        })
        .catch(error => {
            // 处理错误
        });
};

runHandler(); // 启动定时任务

登录后复制

这段代码使用setInterval函数每秒执行一次回调函数。回调函数获取当前小时数，并根据小时数判断使用getToday()或getTomorrow()函数获取日期，然后调用runHttpRequest()函数，将日期参数传递给接口。 getToday()和getTomorrow()函数分别返回YYYY-MM-DD格式的当天和次日日期，并使用了padStart方法确保月份和日期始终为两位数。 runHttpRequest()函数是接口调用的占位符，需要根据实际情况替换成你的接口调用代码。最后，runHandler()启动定时任务。请注意替换/api/endpoint为你的实际接口地址。