A SharePoint Framework (SPFx) web part which calls an Azure function and processes the response.

CobSpFxAzureFunctionWebPart.ts

import { Version } from '@microsoft/sp-core-library';
import {
  BaseClientSideWebPart,
  IPropertyPaneConfiguration,
  PropertyPaneTextField
} from '@microsoft/sp-webpart-base';
import { HttpClient, SPHttpClient, HttpClientConfiguration, HttpClientResponse, ODataVersion, IHttpClientConfiguration, IHttpClientOptions, ISPHttpClientOptions } from '@microsoft/sp-http';
import { escape } from '@microsoft/sp-lodash-subset';
import styles from './CobSpFxAzureFunction.module.scss';
import * as strings from 'cobSpFxAzureFunctionStrings';
import { ICobSpFxAzureFunctionWebPartProps } from './ICobSpFxAzureFunctionWebPartProps';

export default class CobSpFxAzureFunctionWebPart extends BaseClientSideWebPart<ICobSpFxAzureFunctionWebPartProps> {
  // TODO: for production use, you should consider how to handle storage of this URL and auth code..
  protected functionUrl: string = "https://cob-pnp-functions.azurewebsites.net/api/CreateModernPage?code=WniDsXQ43Nf1HYB0JEIRuRrbLPaTTQnuithMnqtXoLQ54Hz6FY/j3g==";

  protected runFunction(): void {
      const requestHeaders: Headers = new Headers();
      requestHeaders.append("Content-type", "application/json");
      requestHeaders.append("Cache-Control", "no-cache");

      var siteUrl: string = this.context.pageContext.web.absoluteUrl;
      var pageName: string = (<HTMLInputElement>document.getElementById("txtPageName")).value;
      var pageText: string = (<HTMLInputElement>document.getElementById("txtPageText")).value;

      console.log(`SiteUrl: '${siteUrl}', PageName: '${pageName}.aspx', PageText: '${pageText}'`);

      const postOptions: IHttpClientOptions = {
        headers: requestHeaders,
        body: `{ SiteUrl: '${siteUrl}', PageName: '${pageName}.aspx', PageText: '${pageText}' }`
      };

      let responseText: string = "";
      let resultMsg: HTMLElement = document.getElementById("responseContainer");

      this.context.httpClient.post(this.functionUrl, HttpClient.configurations.v1, postOptions).then((response: HttpClientResponse) => {
         response.json().then((responseJSON: JSON) => {
            responseText = JSON.stringify(responseJSON);
            if (response.ok) {
                resultMsg.style.color = "green";
            } else {
                resultMsg.style.color = "red";
            }

            resultMsg.innerText = responseText;
          })
          .catch ((response: any) => {
            let errMsg: string = `WARNING - error when calling URL ${this.functionUrl}. Error = ${response.message}`;
            resultMsg.style.color = "red";
            console.log(errMsg);
            resultMsg.innerText = errMsg;
          });
      });
  }

  public render(): void {
    this.domElement.innerHTML = `
      <div class="${styles.helloWorld}">
        <div class="${styles.container}">
          <div class="ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}">
            <div class="ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1">
              <span class="ms-font-xl ms-fontColor-white">Create a new page in this site</span>
              <div class="${styles.formRow}">
                <span class="ms-font-l ms-fontColor-white ${styles.formLabel}">Page name:</span>
                <input type="text" id="txtPageName"></input>.aspx
              </div>
              <div class="${styles.formRow}">
                <span class="ms-font-l ms-fontColor-white ${styles.formLabel}">Page content:</span>
                <input type="text" id="txtPageText"></input>
              </div>
              <div class="${styles.buttonRow}"></div>
              <button id="btnRunFunction" class="${styles.button}">Create</button>
              <div id="responseContainer" class="${styles.result}"></div>
            </div>
          </div>
        </div>
      </div>`;

      document.getElementById("btnRunFunction").onclick = this.runFunction.bind(this);
  }

  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField('description', {
                  label: strings.DescriptionFieldLabel
                })
              ]
            }
          ]
        }
      ]
    };
  }
}