使用GraphHttpClient调用Microsoft Graph接口 - GET

使用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部件工程

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();});
 }

export interface IOffice365Group {
 // Microsoft Graph has more group properties.
 displayName: string;
 mail: string;
 description: string;
}

接下来，我们将使用GraphHttpClient.get()方法来执行一个REST请求到Microsoft Graph来获取Office 365组列表。

1. 在DemoWpWebPart.ts文件中添加如下import片段来引入GraphHttpClient类及其相关的类型。

import { GraphHttpClient, HttpClientResponse, IGraphHttpClientOptions } from '@microsoft/sp-http';

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);
   });
}

你可以通过这种方式构建任何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;
}

1. 使用gulp来打包解决方案，输入以下命令。

gulp package-solution

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

gulp serve --nobrowser

本篇就介绍到这里。