Vue.js 中实现每日定时调用接口并传递日期

在 Vue.js 应用中实现每天定时调用接口并根据时间传递当天或次日日期，可以通过以下几种方式实现：

方案一：使用 setInterval 定时检查

export default {
  data() {
    return {
      timer: null
    }
  },
  mounted() {
    this.setupDailyCheck();
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    setupDailyCheck() {
      // 每分钟检查一次时间
      this.timer = setInterval(() => {
        const now = new Date();
        const hours = now.getHours();
        const minutes = now.getMinutes();

        // 假设每天凌晨0点执行
        if (hours === 0 && minutes === 0) {
          this.callApiWithDate();
        }
      }, 60000); // 每分钟检查一次

      // 立即执行一次检查
      this.callApiWithDate();
    },

    callApiWithDate() {
      const now = new Date();
      const hours = now.getHours();

      // 判断当前时间决定使用当天还是次日日期
      // 例如：下午6点后使用次日日期
      const targetDate = hours >= 18 ? 
        this.getNextDayDate() : 
        this.getTodayDate();

      // 调用API
      this.$axios.get('/your-api-endpoint', {
        params: {
          date: targetDate
        }
      }).then(response => {
        // 处理响应
      }).catch(error => {
        console.error('API调用失败:', error);
      });
    },

    getTodayDate() {
      const today = new Date();
      return today.toISOString().split('T')[0]; // 返回 YYYY-MM-DD 格式
    },

    getNextDayDate() {
      const tomorrow = new Date();
      tomorrow.setDate(tomorrow.getDate() + 1);
      return tomorrow.toISOString().split('T')[0]; // 返回 YYYY-MM-DD 格式
    }
  }
}

方案二：使用 Web Worker 实现更精确的定时

对于需要更精确或长时间运行的定时任务，可以使用 Web Worker：

1. 创建 worker.js 文件：

// worker.js
function setupDailyCheck(callbackTime) {
  const now = new Date();
  let nextCall = new Date(
    now.getFullYear(),
    now.getMonth(),
    now.getDate(),
    callbackTime.hours,
    callbackTime.minutes,
    0,
    0
  );

  // 如果今天的时间已过，设置为明天
  if (now > nextCall) {
    nextCall.setDate(nextCall.getDate() + 1);
  }

  const timeout = nextCall.getTime() - now.getTime();

  setTimeout(() => {
    postMessage('execute');
    // 设置下一次执行
    setupDailyCheck(callbackTime);
  }, timeout);
}

// 监听主线程消息
self.onmessage = function(e) {
  if (e.data === 'start') {
    // 假设每天凌晨0点执行
    setupDailyCheck({ hours: 0, minutes: 0 });
  }
};

2. 在 Vue 组件中使用：

export default {
  data() {
    return {
      worker: null
    }
  },
  mounted() {
    if (window.Worker) {
      this.worker = new Worker('./worker.js');
      this.worker.onmessage = (e) => {
        if (e.data === 'execute') {
          this.callApiWithDate();
        }
      };
      this.worker.postMessage('start');
    } else {
      // 浏览器不支持Worker，回退到方案一
      this.setupDailyCheck();
    }
  },
  beforeDestroy() {
    if (this.worker) {
      this.worker.terminate();
    }
  },
  methods: {
    // 同上方案一的callApiWithDate等方法
  }
}

方案三：使用服务器推送或WebSocket

对于需要更高可靠性的应用，可以考虑：

1. 使用 WebSocket 让服务器推送执行时间
2. 使用 Server-Sent Events (SSE)

日期处理优化

对于日期处理，推荐使用成熟的库如 date-fns 或 day.js：

import dayjs from 'dayjs';

// 获取当天日期
const today = dayjs().format('YYYY-MM-DD');

// 获取次日日期
const tomorrow = dayjs().add(1, 'day').format('YYYY-MM-DD');

注意事项

1. 页面刷新问题：如果用户刷新页面，定时器会重置，考虑使用持久化存储记录上次执行时间
2. 时区问题：确保日期处理考虑到了用户的时区
3. 性能考虑：频繁的 setInterval 可能影响性能，Web Worker 是更好的选择
4. 移动设备：在移动设备上，页面休眠时定时器可能不准确

选择哪种方案取决于你的具体需求和应用场景。对于大多数 Vue.js 应用，方案一已经足够；如果需要更高可靠性，可以考虑方案二或方案三。