为何获取谷歌日历事件的函数返回空数组？循环内外访问异常解惑

兄弟，你这问题我太熟了——典型的异步代码时序坑！我帮你拆解清楚：

为啥会出现这种矛盾？ #

谷歌日历的API调用是异步操作，简单说就是：你调用获取事件的函数时，JavaScript不会傻等着API返回数据，而是直接往下跑代码。所以你的函数在API还没把事件数据拿回来的时候，就已经把空的test数组返回给gehad了。

而循环里能打印出test[0].id，是因为那部分代码是写在API请求成功的回调里的——只有当数据真的回来了，这部分代码才会执行，数组自然有内容；但循环外的代码是在回调执行前就跑了，这时候test还是空的，你去访问test[0].id，就相当于访问undefined.id，不报错才怪！

怎么解决？给你两种靠谱方案 #

方案1：用async/await（推荐，代码读起来像同步） #

把获取事件的函数改成异步函数，用await等待API返回结果，这样就能保证拿到数据后再返回数组：

// 定义异步的日历事件获取函数
async function getCalendarEvents() {
  const test = [];
  // 等待谷歌API请求完成，拿到响应
  const apiResponse = await gapi.client.calendar.events.list({
    calendarId: 'primary', // 换成你的目标日历ID
    // 可以加其他参数，比如时间范围、最大返回数等
  });
  const events = apiResponse.result.items;
  // 把事件推入数组
  events.forEach(event => test.push(event));
  return test;
}

// 用async函数来接收结果
async function init() {
  const gehad = await getCalendarEvents();
  // 现在这里就能正常访问事件ID了
  console.log(gehad[0].id);
}

// 记得先初始化谷歌API客户端再调用init
gapi.load('client', () => {
  gapi.client.init({
    apiKey: '你的API密钥',
    discoveryDocs: ["https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest"],
  }).then(() => {
    init();
  });
});

方案2：用回调函数（传统写法，兼容旧环境） #

如果更习惯回调的写法，就把处理数组的逻辑放到回调里，等数据回来再执行：

function getCalendarEvents(callback) {
  const test = [];
  gapi.client.calendar.events.list({
    calendarId: 'primary',
    // 其他参数
  }).then(response => {
    const events = response.result.items;
    events.forEach(event => test.push(event));
    // 数据准备好后，调用回调把数组传进去
    callback(test);
  });
}

// 调用函数，在回调里处理结果
getCalendarEvents(gehad => {
  console.log(gehad[0].id); // 这里就能正常打印啦
});

敲黑板的关键提醒 #

所有涉及网络请求的API（不管是谷歌日历还是自己的后端接口）几乎都是异步的，绝对不能像写同步代码那样，直接在函数末尾返回数组——因为这时候数据还在路上呢！必须等异步操作完成（比如API返回结果），再去处理数组或者返回它。

内容的提问来源于stack exchange，提问作者FllnAngl