博客地址：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-solution

2. 将解决方案部署到SharePoint租户。

>访问网站的应用程序目录

>上传.sppkg的包到应用程序目录

>在弹出的提示框中进行确认，并选择部署。

3. 使用gulp serve来承载web部件，输入以下命令。

gulp serve --nobrowser

将web部件添加到网页，或使用SharePoint的工作台。结果类似下图显示的样子。

本篇就介绍到这里。