MIcrosoft API 获取日历事件描述并适当地显示它

Question

在我的 React 项目中，我调用了 Axios 来填充日历事件列表，从 Microsoft Outlook 日历中获取数据（使用 Microsoft API）。结果如下

如您所见，只有事件描述给我一个问题。事实上，为了显示事件描述，它向我显示了一个没有事件详细信息的 HTML 字符串。

我读到我必须输入我的请求 Content-type:text 的 header，但我试过了，但没有用。我该如何解决？这是我的 Axios 请求

getEvents(startDate, endDate, accessToken) {
    const startDateString = startDate.toISOString();
    const endDateString = endDate.toISOString();
    axios.get(
      `https://graph.microsoft.com/v1.0/users/${USER_PUBLIC_ID}/calendarview?startdatetime=${startDateString}&enddatetime=${endDateString}&orderby=start/dateTime`,
      {
        headers: {
          Authorization: `Bearer ${accessToken}`,
        },
      },
    ).then(response => this.setEvents(response.data.value))
      .catch((error) => {
        console.error(error.response);
      });
  }

Answer 1

你需要给axios一个配置对象。目前，您正在使用 get 属性，这就是您的代码当前无法运行的原因：

axios({
url: `https://graph.microsoft.com/v1.0/users/${USER_PUBLIC_ID}/calendarview?startdatetime=${startDateString}&enddatetime=${endDateString}&orderby=start/dateTime`,
method: "GET",
        headers: {
          Authorization: `Bearer ${accessToken}`,
          "Content-type": "text"
        },
})

您可以在这里阅读更多内容：https://github.com/axios/axios

Answer 2

为此 Prefer: outlook.body-content-type="text" header 需要指定。

According to documentation:

To specify the desired format to be returned in the Body and UniqueBody properties in a GET request, use the Prefer: outlook.body-content-type header:

Specify Prefer: outlook.body-content-type="text" to get a message body returned in text format.

Specify Prefer: outlook.body-content-type="html", or just skip the header, to return the message body in HTML format.

例子

getEvents(startDate, endDate, accessToken) {
    const startDateString = startDate.toISOString();
    const endDateString = endDate.toISOString();
    return axios.get(
      `https://graph.microsoft.com/v1.0/users/${USER_PUBLIC_ID}/calendarview?startdatetime=${startDateString}&enddatetime=${endDateString}&orderby=start/dateTime`,
      {
        headers: {
          'Authorization': `Bearer ${accessToken}`,
          'Content-Type': 'application/json',
          'Prefer' : 'outlook.body-content-type="text"'
        }
      }
    );
}

MIcrosoft API 获取日历事件描述并适当地显示它

MIcrosoft API get Calendar Event description and show it appropriately

reactjs

microsoft-graph-calendar

microsoft-graph-api