博客地址：http://blog.csdn.net/FoxDave
使用GraphHttpClient类调用Microsoft Graph REST API，你可以使用GET，POST和PATCH请求（分别对应get()，post()和fetch()方法）。本文会讲述如何构建一个使用GraphHttpClient的web部件（你可以在任何SharePoint Framework客户端代码使用GraphHttpClient）。本篇主要讲解GET请求的应用。
使用GET请求获取Office 365组信息
你可以使用get()方法来向Microsoft Graph构建一个REST请求，下面的示例演示了如何获取Office 365的组列表。
创建一个新的web部件工程
1. 在你喜欢的目录创建一个新的工程目录，这里我使用D盘根目录。打开CMD，输入D:进入D盘根目录，接着输入命令mkdir hellograph-webpart来创建一个工程目录。
2. 进入刚才创建的目录，使用命令cd hellograph-webpart。
3. 在工程目录创建SharePoint工程，通过使用Yeoman的生成器来实现。输入命令yo @microsoft/sharepoint。
4. 如上图所示，输入完命令后会提示是不是发送匿名信息，一般这类的信息我都会选否。之后会弹出创建SharePoint解决方案的向导。这里需要输入以下信息：
>解决方案的名称
>解决方案的路径
>在弹出的提示的时候如果输入y确认，则允许租户管理员立即部署解决方案到所有的网站，而不用在网站中再运行任何功能部署和添加Add-in的步骤
>选择web部件作为客户端组件来创建
>输入web部件的名称
>输入web部件的描述
>选择脚本框架，这里可以直接输入回车选择默认的不使用
这里我的设置如下图。
5. 稍等几分钟等待解决方案创建完成。Yeoman生成器会构建web部件，构建完成之后你就可以使用自己的代码编辑器打开该工程了，这里我使用Visual Studio Code。
6. 接着输入gulp serve命令确认它已经在本地的工作台运行了。
为结果添加一个按钮和占位符
接下来，我们需要修改HTML，提供一个按钮来获取Office 365的组信息。HTML还需要一个占位符（placeholder）来显示组的信息。
1. 在Visual Studio Code中，打开文件/src\webparts\demoWp\DemoWpWebPart.ts。
2. 修改render()方法，添加一个按钮和一个div用来获取和展示组信息。代码如下（TypeScript代码，不了解的可以看看介绍，很好理解）：
public render(): void {
this.domElement.innerHTML = `
<div class="${styles.helloGraph}">
<div class="${styles.container}">
<div class="ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}">
<div class="ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1">
<span class="ms-font-xl ms-fontColor-white">Welcome to SharePoint!</span>
<p class="ms-font-l ms-fontColor-white">Customize SharePoint experiences using Web Parts.</p>
<p class="ms-font-l ms-fontColor-white">${escape(this.properties.description)}</p>
<a href="https://aka.ms/spfx" class="${styles.button}">
<span class="${styles.label}">Learn more</span>
</a>
<p>
<input id="readGroups" type="button" value="Read Groups"/>
</p>
<div id="spTableContainer" ></div>
</div>
</div>
</div>
</div>`;
this.domElement.querySelector('#readGroups').addEventListener('click',() => {this._readGroups();});
}稍后会对这里面的_readGroups()方法进行定义。
3. 定义一个用来显示每个Office 365组信息的接口，将下面的代码添加到DemoWP类的上面但是要确保在imports的下面。
export interface IOffice365Group {
// Microsoft Graph has more group properties.
displayName: string;
mail: string;
description: string;
}
使用GraphHttpClient.get方法来获取Office 365的组
接下来，我们将使用GraphHttpClient.get()方法来执行一个REST请求到Microsoft Graph来获取Office 365组列表。
1. 在DemoWpWebPart.ts文件中添加如下import片段来引入GraphHttpClient类及其相关的类型。
import { GraphHttpClient, HttpClientResponse, IGraphHttpClientOptions } from '@microsoft/sp-http';2. 在DemoWP类中添加下面的代码定义_readGroups()方法。
protected _readGroups(){
// Query for all groups on the tenant using Microsoft Graph.
this.context.graphHttpClient.get(`v1.0/groups?$orderby=displayName`, GraphHttpClient.configurations.v1).then((response: HttpClientResponse) => {
if (response.ok) {
return response.json();
} else {
console.warn(response.statusText);
}
}).then((result: any) => {
// Transfer result values to the group variable
this._renderTable(result.value);
});
}在上面的代码片段中，context属性具有GraphHttpClient的实例对象。当我们调用get()方法时，会生成一个到Microsoft Graph的REST请求，传递指定的URL。在上面的示例中，URL为v1.0/groups?orderby=displayName。该请求会返回租户中所有Office 365组的信息并以显示名排序。
你可以通过这种方式构建任何GET请求，传入正确的URL值即可。关于URL值的说明，戳这里。例如，你可以使用这里提到的组相关的URL来获取组信息。
get()方法会返回一个HttpClientResponse对象，你可以通过它判断请求是否成功，返回的JSON在result.value属性中。这里由于我们需要获取组信息，将返回结果传给_renderTable()方法。
3. 创建_renderTable()方法来展示返回的组信息，将以下代码添加到DemoWP类中。
protected _renderTable(items: IOffice365Group[]): void {
let html: string = '';
if (items.length<=0){
html=`<p>There are no groups to list...</p>`;
}
else {
html += `
<table><tr>
<th>Display Name</th>
<th>Mail</th>
<th>Description</th></tr>`;
items.forEach((item: IOffice365Group) => {
html += `
<tr>
<td>${item.displayName}</td>
<td>${item.mail}</td>
<td>${item.description}</td>
</tr>`;
});
html += `</table>`;
}
const tableContainer: Element = this.domElement.querySelector('#spTableContainer');
tableContainer.innerHTML = html;
return;
}
运行web部件来调用Microsoft Graph
我们的代码需要调用运行在SharePoint上的GraphHttpClient应用程序，所以本地的工作台是无法正确运行的。我们需要打包并把它部署到SharePoint。
1. 使用gulp来打包解决方案，输入以下命令。
gulp package-solution2. 将解决方案部署到SharePoint租户。
>访问网站的应用程序目录
>上传.sppkg的包到应用程序目录
>在弹出的提示框中进行确认，并选择部署。
3. 使用gulp serve来承载web部件，输入以下命令。
gulp serve --nobrowser将web部件添加到网页，或使用SharePoint的工作台。结果类似下图显示的样子。
本篇就介绍到这里。
