Google Calendar API插入事件失败问题求助

问题背景 #

已完成授权，但调用Google Calendar API的insert接口添加事件失败，调整事件格式后仍无法解决。以下是React项目中触发添加事件的addEvents函数代码：

function addEvents() {
        gapi.load('client:auth2', () => {
            console.log('loaded client')

            gapi.client.init({
            apiKey: API_KEY,
            clientId: CLIENT_ID,
            discoveryDocs: DISCOVERY_DOCS,
            scope: SCOPES,
            })

            gapi.client.load('calendar', 'v3', () => console.log('bam!'));

            gapi.auth2.getAuthInstance().signIn()
            .then(() => {
                //for (const task of [...tasks]) {
                
                const eventStartTime = new Date()
                eventStartTime.setDate(eventStartTime.getDay() + 5)
                
                const eventEndTime = new Date()
                eventEndTime.setDate(eventEndTime.getDay() + 5)
                eventEndTime.setMinutes(eventEndTime.getMinutes() + 45)
                
                var event = {
                    'summary': 'Awesome Event!',
                    'location': '800 Howard St., San Francisco, CA 94103',
                    'description': 'Really great refreshments',
                    'start': {
                      'dateTime': '2023-04-01T09:00:00-07:00',
                      'timeZone': 'America/Los_Angeles'
                    },
                    'end': {
                      'dateTime': '2023-04-01T17:00:00-07:00',
                      'timeZone': 'America/Los_Angeles'
                    },
                    'recurrence': [
                      'RRULE:FREQ=DAILY;COUNT=2'
                    ],
                    'attendees': [
                      {'email': 'lpage@example.com'},
                      {'email': 'sbrin@example.com'}
                    ],
                    'reminders': {
                      'useDefault': false,
                      'overrides': [
                        {'method': 'email', 'minutes': 24 * 60},
                        {'method': 'popup', 'minutes': 10}
                      ]
                    }
                  }
                
                var request = gapi.client.calendar.events.insert({
                    'calendarId': 'primary',
                    'resource': event,
                });
                request.execute();
                //}
            })
            
        })
        
    }

错误信息 #

控制台报错：gapi.client.calendar is undefined

解决方案 #

问题核心是异步操作未按顺序等待，API客户端和日历服务未加载完成就执行了插入事件的逻辑，修改后的代码如下：

function addEvents() {
    gapi.load('client:auth2', async () => {
        console.log('loaded client');

        // 等待客户端初始化完成
        await gapi.client.init({
            apiKey: API_KEY,
            clientId: CLIENT_ID,
            discoveryDocs: DISCOVERY_DOCS,
            scope: SCOPES,
        });

        // 等待日历API加载完成
        await new Promise(resolve => {
            gapi.client.load('calendar', 'v3', resolve);
        });
        console.log('bam!');

        // 等待登录授权完成
        await gapi.auth2.getAuthInstance().signIn();

        const event = {
            'summary': 'Awesome Event!',
            'location': '800 Howard St., San Francisco, CA 94103',
            'description': 'Really great refreshments',
            'start': {
                'dateTime': '2023-04-01T09:00:00-07:00',
                'timeZone': 'America/Los_Angeles'
            },
            'end': {
                'dateTime': '2023-04-01T17:00:00-07:00',
                'timeZone': 'America/Los_Angeles'
            },
            'recurrence': [
                'RRULE:FREQ=DAILY;COUNT=2'
            ],
            'attendees': [
                {'email': 'lpage@example.com'},
                {'email': 'sbrin@example.com'}
            ],
            'reminders': {
                'useDefault': false,
                'overrides': [
                    {'method': 'email', 'minutes': 24 * 60},
                    {'method': 'popup', 'minutes': 10}
                ]
            }
        };

        const request = gapi.client.calendar.events.insert({
            'calendarId': 'primary',
            'resource': event,
        });
        
        // 添加回调处理执行结果，便于排查后续问题
        request.execute((response) => {
            if (response.error) {
                console.error('添加事件失败:', response.error);
            } else {
                console.log('事件添加成功:', response.htmlLink);
            }
        });
    });
}

额外注意事项 #

• 确保DISCOVERY_DOCS配置正确，需包含日历API的发现文档：["https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest"]
• 如果仍有问题，检查授权SCOPES是否包含https://www.googleapis.com/auth/calendar.events（或更高级的日历权限）

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