Fullcalendar双Ajax回调问题：合并多源事件数据方案求助

嘿，这个异步回调的坑我之前踩过！核心问题就是两个Ajax请求是并行异步的，你没法保证哪个先完成，所以之前的代码会随机拿到其中一组数据就传给日历了。咱们用Promise.all（或者jQuery的$.when，如果你还在使用jQuery的话）就能完美解决，确保两个请求都完成后再合并数据初始化日历。

方法一：使用原生Promise + Fetch API #

先把每个数据请求封装成返回Promise的函数，然后用Promise.all等待所有请求完成：

// 封装获取事件数据的函数
function fetchEvents() {
  return fetch('/your-events-api-url') // 替换成你的事件接口地址
    .then(response => {
      if (!response.ok) throw new Error('事件请求失败');
      return response.json();
    })
    .catch(err => {
      console.error('获取事件出错:', err);
      return []; // 失败时返回空数组，避免影响后续合并
    });
}

// 封装获取休假数据的函数
function fetchVacations() {
  return fetch('/your-vacations-api-url') // 替换成你的休假接口地址
    .then(response => {
      if (!response.ok) throw new Error('休假请求失败');
      return response.json();
    })
    .catch(err => {
      console.error('获取休假出错:', err);
      return [];
    });
}

// 等待两个请求都完成后处理
Promise.all([fetchEvents(), fetchVacations()])
  .then(([eventsData, vacaData]) => {
    // 合并两个数据源
    const combinedEvents = [...eventsData, ...vacaData];
    
    // 初始化FullCalendar
    document.addEventListener('DOMContentLoaded', function() {
      const calendarEl = document.getElementById('calendar');
      const calendar = new FullCalendar.Calendar(calendarEl, {
        // 你的日历基础配置
        headerToolbar: {
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        // 传入合并后的事件数据
        events: combinedEvents,
        // 其他自定义配置...
      });
      calendar.render();
    });
  })
  .catch(globalErr => {
    console.error('全局请求错误:', globalErr);
  });

方法二：使用jQuery的$.when（如果你依赖jQuery） #

如果你的项目还在使用jQuery的$.ajax，可以用$.when来等待多个请求完成：

// 封装事件请求
function fetchEvents() {
  return $.ajax({
    url: '/your-events-api-url',
    method: 'GET'
  }).fail(() => []); // 失败返回空数组
}

// 封装休假请求
function fetchVacations() {
  return $.ajax({
    url: '/your-vacations-api-url',
    method: 'GET'
  }).fail(() => []);
}

// 等待两个请求完成
$.when(fetchEvents(), fetchVacations())
  .done(function(eventsResponse, vacaResponse) {
    // 注意：jQuery的done回调中，每个请求的响应是包含数据的数组，取第一个元素
    const eventsData = eventsResponse[0];
    const vacaData = vacaResponse[0];
    const combinedEvents = [...eventsData, ...vacaData];
    
    // 初始化FullCalendar（jQuery版本）
    $('#calendar').fullCalendar({
      events: combinedEvents,
      // 其他配置...
    });
  })
  .fail(err => {
    console.error('请求失败:', err);
  });

关键原理 #

Promise.all和$.when都会等待所有传入的异步操作全部完成后才执行后续回调，这样就能确保你拿到的是两组完整的数据，再合并成一个数组传给FullCalendar，再也不会出现随机显示某一组数据的问题了。

额外提醒：别忘了在catch分支处理错误，避免某个请求失败导致整个日历无法加载哦！

内容的提问来源于stack exchange，提问作者Marek Špeta