这是我参与11月更文挑战的第6天，活动详情查看：11月更文挑战

调用第三方REST API

在SharePoint 框架中使用REST API 在前面已经写过了

SharePoint 框架项目的一个常见要求是它们显示 Web 部件外部的数据交互,这就需要调用第三方的API。

HttpClientAPI是在SharePoint框架项目大部分HTTP请求的基石。您将使用HttpClientAPI 主要向第三方 API 提交匿名请求。该SPHttpClientAPI扩展HttpClient以包括由在SharePoint REST API使用必要HTTP请求头。例如，SPHttpClient自动包含odata-version设置为4将 SharePoint REST API 从默认 OData v3 协议配置为 OData v4的HTTP 请求标头。

这些相关的 HTTP 请求 API 都不需要开发人员安装额外的客户端或库；默认的 SharePoint 框架项目包括您在项目中向 REST API 提交请求所需的一切。

创建 SharePoint 框架解决方案

打开命令提示符并切换到要创建项目的文件夹。通过执行以下命令运行 SharePoint Yeoman 生成器：

yo @microsoft/sharepoint

请选择 webpart 并使用react框架

更新 React 组件的公共接口

找到并打开文件 ./src/webparts/spFxHttpClient/components/ISpFxHttpClientProps.ts。这是 React 组件上公共属性的接口。

更新接口以description使用将包含自定义对象的属性替换现有属性。这个对象很复杂，虽然您可以创建一个接口来表示它，但在本实验中，您将把这种复杂性放在一边，专注于使用无类型的 TypeScript 对象。

export interface ISpFxHttpClientDemoProps {
  apolloMissionImage: any;
}

实现 Web 部件的用户界面

找到并打开文件 ./src/webparts/spFxHttpClient/components/SpFxHttpClient.module.scss。

.list {
  color: $ms-color-themeDark;
  background-color: $ms-color-themeLight;
  font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  box-sizing: border-box;
  margin: 0 0;
  padding: 10px 0 100px 0;
  line-height: 50px;
  list-style-type: none;
}

.item {
  color: $ms-color-themeDark;
  background-color: $ms-color-themeLighterAlt;
  vertical-align: center;
  font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  box-shadow: none;
  *zoom: 1;
  padding: 0 15px;
  position: relative;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
}

./src/webparts/spFxHttpClient/components/SpFxHttpClient.tsx.

修改render()方法

<div className={ styles.spFxHttpClient }>
  <div className={ styles.container }>
    <div className={ styles.row }>
      <div className={ styles.column }>
        <span className={ styles.title }>HttpClient Demo</span>
      </div>
    </div>

    <div className={ styles.row }>
      <img src={ this.props.apolloMissionImage.links[0].href } />
      <div><strong>Title:</strong> { this.props.apolloMissionImage.data[0].title }</div>
      <div><strong>Keywords:</strong></div>
      <ul className={ styles.list }>
        { this.props.apolloMissionImage &&
          this.props.apolloMissionImage.data[0].keywords.map( (keyword) =>
            <li key={ keyword} className={ styles.item }>
              { keyword }
            </li>
          )
        }
      </ul>
    </div>

  </div>
</div>

实现webpart 逻辑

./src/webparts/spFxHttpClient/SpFxHttpClientWebPart.ts

TypeScriptCopy

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

SpFxHttpClientWebPart

//这是实现官方文档上的API 请求的是一张NASA的图片
private _getApolloImage(): Promise<any> {
  return this.context.httpClient.get(
    `https://images-api.nasa.gov/search?q=Apollo%204&media_type=image`,
    HttpClient.configurations.v1
  )
  .then((response: HttpClientResponse) => {
    return response.json();
  })
  .then(jsonResponse => {
    return jsonResponse;
  }) as Promise<any>;
}

此方法使用HttpClient当前 SharePoint 上下文中的可用信息，并向 NASA Image REST API 发出 HTTP GET 请求，查询等于Apollo 4。处理对 JSON 的响应后，它作为无类型any对象返回给调用者。

将render()方法的内容更新为以下代码：

public render(): void {
  if (!this.renderedOnce) {
    this._getApolloImage()
      .then(response => {
        const element: React.ReactElement<ISpFxHttpClientProps > = React.createElement(
          SpFxHttpClient,
          {
            apolloMissionImage: response.collection.items[0]
          }
        );

        ReactDom.render(element, this.domElement);
      });
  }
}

在此代码中，我们添加了检查以查看 Web 部件是否已在页面上呈现。如果没有，它会调用_getApolloImage()之前添加的方法。当它收到响应时，它会附加 NASA Imagery REST API 返回的结果中的第一项。

测试webpart

使用命令

gulp serve

修改成你想要的API

比如我修改了高德地图旗下的天气API 修改相关的显示文字

SharePoint 调用第三方REST API