Extract of code used in SPFx isolated web part to call AAD-secured web API.

IsolatedWebPart_SampleComponent.tsx

const requestHeaders: Headers = new Headers();
requestHeaders.append('Content-type', 'application/json');
requestHeaders.append('Cache-Control', 'no-cache');

const functionUrl: string = 'https://[FUNCTION HOST URL].azurewebsites.net/api/TeamCreator';
const cobAadFunctionsAppClientId: string = '[CLIENT ID RELATED TO AZURE FUNCTION APP HERE]';

const options: IHttpClientOptions = {
headers: requestHeaders,
body: `{ 'teamName': '${this.state.teamName}', 'teamDesc': '${this.state.teamDesc}' }`
};

this.props.aadHttpClientFactory
.getClient(cobAadFunctionsAppClientId)
.then((client: AadHttpClient): void => {
  client
    .post(functionUrl, AadHttpClient.configurations.v1, options)
    .then((response: HttpClientResponse) => {
      response.json().then((responseJSON: JSON) => {
        console.log('Back-end API returned: ' + responseJSON);
        this.setState({isLoading: false});
      });
    })
    .catch((error: any) => {
      console.log('Error caught when calling API: ' + error);
      this.setState({isLoading: false});
    });
});