Javascript Reactjs从calendar异步加载事件-Google calendar API

我试图从google calendar api加载事件，我使用gapi.client.request获取该api，问题是我无法找到正确使用async/Wait的方法。我的事件在我的呈现组件之后加载。我以前使用过async await，它可以与fetch和其他API一起正常工作。是否有其他方法等待google.thenable对象。因为这是一个承诺，就像我以前认为的那样，我会更容易处理和fetch之前的承诺。我在这里完全迷路了，任何帮助都将不胜感激

const [events, setEvents] = useState([]);

useEffect(() => {
    getEvents();
});

async function get(){
    await getEvents();
}

function getEvents(){
        init()
            .then(() => {
                return gapi.client.request({
                    'path': `https://www.googleapis.com/calendar/v3/calendars/${CALENDAR_ID}/events`,
                })
            })
            .then((res) => {
            const allEvents = res.result.items;
            setEvents(sortedEvents);
        }, (reason) => {
            console.log(reason);
        });
}

---

事件不会在组件之前加载，因此不会正确等待它们。我希望异步加载我的事件，以便它们与其他表示组件同时显示。

代码中似乎存在一些小问题

首先，别忘了使

getEvents（）

函数异步

其次，记住在

useffect（）

方法中为s添加第二个参数

因此，您的代码应该如下所示：

const [events, setEvents] = useState([]);

useEffect(() => {
    getEvents();
}, []);

async function get(){
    await getEvents();
}

async function getEvents(){
        init()
            .then(() => {
                return gapi.client.request({
                    'path': `https://www.googleapis.com/calendar/v3/calendars/${CALENDAR_ID}/events`,
                })
            })
            .then((res) => {
            const allEvents = res.result.items;
            setEvents(sortedEvents);
        }, (reason) => {
            console.log(reason);
        });
}

您可能想阅读更多关于如何使用React处理api的内容，下面是一个供您参考的示例

希望这有帮助