This is the 6th day of my participation in the Novembermore Challenge

Invoke a third-party REST API

Using the REST API in the SharePoint framework has been written about previously

A common requirement of SharePoint framework projects is that they display data interactions outside of Web parts, which requires the invocation of third-party apis.

HttpClientAPI is the cornerstone of most HTTP requests in SharePoint Framework projects. You will use the HttpClientAPI to submit anonymous requests primarily to third-party apis. The SPHttpClientAPI extends HttpClient to include the HTTP request headers necessary for use by the SharePoint REST API. For example, SPHttpClient automatically contains HTTP request headers that configure the SharePoint REST API from the default ODATA V3 protocol to ODATA V4 with oDATA-version set to 4.

None of these related HTTP request apis requires developers to install additional clients or libraries; The default SharePoint Framework project includes everything you need to submit a request to the REST API in your project.

Create a SharePoint framework solution

Open a command prompt and switch to the folder where you want to create the project. Run the SharePoint Yeoman generator by executing the following command:

yo @microsoft/sharepoint
Copy the code

Select WebPart and use the React framework

Update the React component’s public interface

Find and open the file. / SRC/webparts spFxHttpClient/components/ISpFxHttpClientProps ts. This is the interface to the public properties on the React component.

Update the interface to replace existing properties with description with properties that will contain custom objects. This object is complex, and while you can create an interface to represent it, in this experiment you’ll put that complexity aside and focus on working with TypeScript objects that have no type.

export interface ISpFxHttpClientDemoProps {
  apolloMissionImage: any;
}
Copy the code

Implement the user interface for Web parts

Find and open the file. / SRC/webparts spFxHttpClient/components/spFxHttpClient module. The 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);
}
Copy the code

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

Modify the Render () method

<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>Copy the code

Implement webPart logic

./src/webparts/spFxHttpClient/SpFxHttpClientWebPart.ts

TypeScriptCopy

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

SpFxHttpClientWebPart

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>; }Copy the code

This method uses the information available in the current SharePoint context of HttpClient and issues an HTTP GET request to the NASA Image REST API with a query equal to Apollo 4. After processing the response to JSON, it is returned to the caller as an untyped any object.

Update the contents of the Render () method with the following code:

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);
      });
  }
}
Copy the code

In this code, we added checks to see if the Web part is rendered on the page. If not, it calls the method added before _getApolloImage(). When it receives the response, it appends the first item in the result returned by the NASA Imagery REST API.

Test your web

Using the command

gulp serve
Copy the code

Modify it to the API you want

For example, I modified the weather API of Amap to modify the relevant display text