练习 - 分批加载用户的电子邮件

5 分钟

在本练习中，将扩展该应用，以 10 个批量的项目加载用户的电子邮件。

分批加载 10 个项目的电子邮件

首先更新 getEmails() 函数，分批加载 10 个项目的电子邮件。如果已定义要加载的下一组电子邮件，它将作为函数的参数传递。

在代码编辑器中，打开 graph.js 文件。
更新 getEmails() 函数的签名以接受单个参数 nextLink:
```
async function getEmails(nextLink) {
  // ...
}
```

如果已设置 nextLink ，则函数应将其传递给 SDK 检索数据。如果尚未设置 nextLink ，则函数应加载初始数据集。使用以下 if 语句代替 return 语句来更新 getEmails() 函数:

if (nextLink) {
  return await graphClient
    .api(nextLink)
    .get();
}
else {
  return await graphClient
    .api('/me/messages')
    .select('subject,receivedDateTime')
    .orderby('receivedDateTime desc')
    .top(10)
    .get();
}

更新的 getEmails() 函数应如下所示:

async function getEmails(nextLink) {
  ensureScope('mail.read');

  if (nextLink) {
    return await graphClient
      .api(nextLink)
      .get();
  }
  else {
    return await graphClient
      .api('/me/messages')
      .select('subject,receivedDateTime')
      .orderby('receivedDateTime desc')
      .top(10)
      .get();
  }
}

扩展模板让用户加载更多电子邮件

扩展 getEmails() 函数，加载更多电子邮件。下一步显示允许用户加载更多电子邮件的按钮（如果可用）。

在代码编辑器中，打开 index.html 文件。
找到行 <ul id="emails"></ul> 并在其后面立即添加以下代码，以添加允许用户加载更多电子邮件的按钮。
```
<div id="loadMoreContainer" style="display: none;">
  <button onclick="displayEmail();">Load more</button>
</div>
```

加载更多电子邮件

更新应用允许用户加载更多电子邮件后，执行最后一步，添加功能以便加载更多电子邮件。

在代码编辑器中打开 ui.js 文件。
在 displayEmail() 函数之前，定义名为 nextLink 的新变量，不向其分配值:
```
var nextLink;
```
在 displayEmail() 函数中，更新调用以获取 getEmails() 函数以包含 nextLink。
```
var emails = await getEmails(nextLink);
```
接下来，检索数据后，获取 @odata.nextLink 属性的值。如果设置，它将指示用户可以显示更多数据。在 displayEmail() 函数的 if 语句后面紧接着添加以下代码:
```
nextLink = emails['@odata.nextLink'];
```
在 displayEmail() 函数的末尾，显示检索到的电子邮件后，滚动到页面末尾，以便用户可以立即看到检索到的电子邮件。
```
window.scrollTo({ top: emailsUl.scrollHeight, behavior: 'smooth' });
```
最后，检查是否已返回 nextLink ，如果返回，则显示按钮以加载更多电子邮件。

将以下代码添加到 displayEmail() 函数末尾:
```
if (nextLink) {
  document.getElementById('loadMoreContainer').style = 'display: block';
}
```

完整的 displayEmail() 函数应如下所示：

var nextLink;
async function displayEmail() {
  var emails = await getEmails(nextLink);
  if (!emails || emails.value.length < 1) {
    return;
  }
  nextLink = emails['@odata.nextLink'];

  document.getElementById('displayEmail').style = 'display: none';

  var emailsUl = document.getElementById('emails');
  emails.value.forEach(email => {
    var emailLi = document.createElement('li');
    emailLi.innerText = `${email.subject} (${new Date(email.receivedDateTime).toLocaleString()})`;
    emailsUl.appendChild(emailLi);
  });
  window.scrollTo({ top: emailsUl.scrollHeight, behavior: 'smooth' });

  if (nextLink) {
    document.getElementById('loadMoreContainer').style = 'display: block';
  }
}

运行应用

已扩展应用，通过使用 Microsoft Graph 以 10 个项目为批次显示用户的电子邮件，并让允许加载更多的电子邮件。让我们在本地运行该应用。

在终端中执行以下命令来预览该 Web 应用。
```
npm start
```
浏览器应指向 http://localhost:8080。
选择“Microsoft 登录”按钮，以使用 Microsoft 365 帐户登录。
使用该帐户登录后，选择“显示电子邮件”按钮。
该应用会显示用户最近的 10 封电子邮件列表。
如果邮箱中有超过 10 封电子邮件，将看到用于加载接下来 10 封邮件的按钮。
通过在终端窗口中选择 CTRL+C 来停止 Node.js 服务器。

继续

练习 - 分批加载用户的电子邮件

分批加载 10 个项目的电子邮件

扩展模板让用户加载更多电子邮件

加载更多电子邮件

运行应用

反馈