博客地址：

使用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 = `     
    
     
     
     
      
       
       
         
        Welcome to SharePoint!         
        
Customize SharePoint experiences using Web Parts.
         
        
${escape(this.properties.description)}
         
                   Learn more                  
        
                   
         
        
       
       
     
      
   
     
 
    
`; 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=`
There are no groups to list...
`; } else {   html += `   
    
`;   items.forEach((item: IOffice365Group) => {     html += `       
`;   });   html += `
     
      
            
Display Name
            
Mail
            
Description
      
      
                  
${item.displayName}
                  
${item.mail}
                  
${item.description}
             
     
    
`; } 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的工作台。结果类似下图显示的样子。

本篇就介绍到这里。