Reactjs 从日历中异步加载事件 - Google Calendar API答案

【问题标题】：Reactjs Asynchronously load events from calendar - Google Calendar APIReactjs 从日历中异步加载事件 - Google Calendar API
【发布时间】：2020-02-07 15:27:38
【问题描述】：

我正在尝试从我使用 gapi.client.request 获取的谷歌日历 api 加载事件，问题是我想不出如何正确使用 async/await 的方法。我的事件在我的演示组件之后加载。我之前使用过 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);
        });
}

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

【问题讨论】：

标签： javascript reactjs async-await google-calendar-api

【解决方案1】：

您的代码中似乎有一些小问题。

首先，别忘了让你的getEvents()函数异步。

其次，记得在你的useEffect()方法上添加第二个参数到stop the function from triggering on every single update。

所以，你的代码应该是这样的：

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 的信息，这里有一个 good resource 供您使用。

希望这会有所帮助。

【讨论】：