Vue.js 项目里怎样在每天下午 17 点调用接口并分别传入今日与明日日期

在 Vue.js 项目开发中，实现特定时间调用接口并传入特定日期参数是常见需求。本文将详细介绍如何在每天下午 17 点调用接口，并分别传入今日与明日的日期。

实现思路

我们需要借助 JavaScript 的定时任务机制来确保在每天下午 17 点触发操作。setInterval 函数可用于设置周期性执行的任务，但这里使用 setTimeout 结合日期计算来实现更精确的定时。获取今日和明日的日期也需要特定的方法。

获取今日与明日日期

在 JavaScript 中，通过 Date 对象来获取日期。获取今日日期很简单，直接实例化 Date 对象：

const today = new Date();

获取明日日期则需要在今日日期的基础上加上一天的毫秒数。一天有 24 小时，每小时 60 分钟，每分钟 60 秒，每秒 1000 毫秒，即一天的毫秒数为 24 * 60 * 60 * 1000。代码如下：

const tomorrow = new Date(today.getTime() + 24 * 60 * 60 * 1000);

为了符合接口传入日期的格式要求，通常需要将日期格式化为 YYYY-MM-DD 这种字符串形式。可以定义一个格式化函数：

function formatDate(date) {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
}
const formattedToday = formatDate(today);
const formattedTomorrow = formatDate(tomorrow);

定时调用接口

接下来，实现每天下午 17 点调用接口。先计算距离当天 17 点的剩余时间：

const now = new Date();
const targetTime = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 17, 0, 0);
let timeDiff = targetTime - now;
if (timeDiff < 0) {
    timeDiff += 24 * 60 * 60 * 1000;
}

使用 setTimeout 来定时执行调用接口的函数：

setTimeout(() => {
    // 这里假设使用 axios 库来调用接口
    import axios from 'axios';
    axios.post('your-api-url', {
        today: formattedToday,
        tomorrow: formattedTomorrow
    })
  .then(response => {
        console.log(response.data);
    })
  .catch(error => {
        console.error('接口调用错误', error);
    });
}, timeDiff);

在实际项目中，可将上述代码封装成一个函数，并在合适的生命周期钩子函数中调用，如 created 钩子函数，以确保在组件创建时就开始定时任务。

通过以上步骤，就能在 Vue.js 项目中实现每天下午 17 点调用接口并分别传入今日与明日日期，满足业务上特定时间获取数据的需求。