How to make requests with SharePoint modern framework (SPFx).

If you build customized webparts for modern SharePoint pages, you obviously need to make requests to SharePoint. We built mostly React webparts now and a simple way to send requests with digest and header is the import of SPHttpClient, which is built in the framework.

We need to pass the context to React to use the HttpClient.

public render(): void {
  const element: React.ReactElement<IOverviewProps > =   React.createElement(
    Overview,
    {
      context: this
    }
  );
ReactDom.render(element, this.domElement);
}

After that you have a this.props.context in your webpart.

Import SPHttpClient in the file you need:

import { SPHttpClient, SPHttpClientResponse } from ‘@microsoft/sp-http’;

Usage of SPHttpClient (example):

this.props.context.spHttpClient.get(`${this.props.sitecollectionurl}/_api/lists/GetByTitle('${listName}')/items}`, SPHttpClient.configurations.v1).then((response) => {
  response.json().then((responseJSON) => {
    console.log(responseJSON);
}).catch((error) => {
    console.warn(error);
});

The results are in responseJSON.