Verbinden des Bausteins mit der AEM Edge-Funktion

Unser Ziel ist es​ einen ​ Edge Delivery Services-Block zu erstellen, der eine AEM Edge-Funktion aufruft, um dynamische Daten aus einer Drittanbieter-API abzurufen.

Der dritte Schritt besteht darin, den Edge Delivery Services-Block, den Sie in Entwickeln des Edge Delivery Services-Blocks mit der von Ihnen erstellten AEM-Edge-Funktion Entwickeln der AEM-Edge-Funktion zu verbinden. Dies ist der Schritt, der die beiden Projekte miteinander verbindet. Führen Sie die beiden lokalen Dev-Server nebeneinander an zwei verschiedenen Ports aus, und lassen Sie den JavaScript-Aufruf des Blocks je nach Ausführungsort den richtigen aufrufen.

Führen Sie beide lokale Dev-Server aus

Im Edge Delivery Services Site-Projekt:

$ aem up

Dies bedient die Website unter http://localhost:3000.

Im AEM Edge Functions -Projekt in einem zweiten Terminal:

$ aio aem edge-functions serve

Dies stellt den Endpunkt bei http://127.0.0.1:7676 bereit.

Verkabeln des Abrufaufrufs

Fügen Sie estimated-delivery.js neben der Strukturvorlage aus dem Block Entwickeln des Edge Delivery Services-Blocks“ Folgendes ​.

Die richtige URL für die Umgebung auswählen

Der Edge Delivery Services-Block ruft je nach Ausführungsort eine andere URL auf:

Erkennen Sie eine lokale Entwicklung aus dem Host-Namen, über den der Browser berichtet, und speichern Sie das Ergebnis zwischen, damit nicht jede Anfrage die Prüfung wiederholt:

// blocks/estimated-delivery/estimated-delivery.js
const API_PATH = '/api/frescopa/estimated-delivery';
const LOCAL_EDGE_FUNCTION_ORIGIN = 'http://127.0.0.1:7676';

let cachedApiUrl;

function isLocalDev() {
  const { hostname } = window.location;
  return hostname === 'localhost' || hostname === '127.0.0.1';
}

function getEstimatedDeliveryApiUrl() {
  if (cachedApiUrl) return cachedApiUrl;

  // Local: site (aem up) on :3000, Edge Function on :7676 — call it directly.
  // Production: relative path, routed to Edge Function via CDN origin selector.
  cachedApiUrl = isLocalDev()
    ? `${LOCAL_EDGE_FUNCTION_ORIGIN}${API_PATH}`
    : API_PATH;

  return cachedApiUrl;
}

Dies ist die einzige umgebungsspezifische Logik im Edge Delivery Services-Block. Alles andere, der Abrufaufruf, die Antwortverarbeitung und das Rendering, funktionieren in beiden Umgebungen gleich, da der Pfad identisch ist. Nur der Ursprung ändert sich.

Aufrufen der AEM Edge-Funktion

// blocks/estimated-delivery/estimated-delivery.js
async function fetchEstimatedDelivery(sku, postcode, signal) {
  const params = new URLSearchParams({ sku, postcode });
  const response = await fetch(`${getEstimatedDeliveryApiUrl()}?${params.toString()}`, {
    signal,
    cache: 'no-store',
  });

  const body = await response.json().catch(() => ({}));

  if (!response.ok) {
    const apiMessage = body.message || body.error;
    const err = new Error(apiMessage || 'Unable to check estimated delivery right now.');
    err.code = body.code;
    throw err;
  }

  return body;
}

err.code führt dasselbe code von API-Vertrag definieren (MISSING_POSTCODE, UNKNOWN_SKU), sodass ein Aufrufer darauf verzweigen kann. Der Edge Delivery Services-Block zeigt nur message an. cache: 'no-store' verhindert, dass der Browser eine personalisierte Antwort zwischenspeichert. Das CDN-eigene Cache-Verhalten wird separat gesteuert, indem es in cdn.yaml skipCache wird. Weitere Informationen finden Sie unter Erstellen eines API-Endpunkts.

Senden-Handler verkabeln

Fügen Sie dies innerhalb von decorate() nach dem Formular-Markup aus Entwickeln des Edge Delivery Services-Blocks hinzu. Dies ist das Kernmuster: Bricht jede während des Fluges ausgeführte Anfrage ab, zeigt das Laden an, ruft die Funktion auf und leitet das Ergebnis an setState weiter:

// blocks/estimated-delivery/estimated-delivery.js
form.addEventListener('submit', async (event) => {
  event.preventDefault();
  // ...extract and validate sku/postcode from the form, omitted here...

  activeRequest?.abort();
  const controller = new AbortController();
  activeRequest = controller;

  setState({ loading: true });

  try {
    const data = await fetchEstimatedDelivery(sku, postcode, controller.signal);
    setState({ data });
  } catch (err) {
    if (err.name === 'AbortError') return;
    setState({ error: formatError(err) });
  }
});

setState umschließt renderResult(), das zwischen dem Lade-, Fehler- und Erfolgs-Markup wechselt. Ein Fehler wird durch formatError() weitergeleitet, was einen Netzwerkfehler (die AEM Edge-Funktion ist nicht erreichbar, sodass der lokale Entwicklungsserver nicht ausgeführt wird oder die CDN-Route noch nicht bereitgestellt ist) von einem Geschäftsfehler unterscheidet, den die AEM Edge-Funktion absichtlich zurückgegeben hat, z. B. eine unbekannte SKU. Der vollständige Handler validiert außerdem clientseitig die Postleitzahl, bevor die Funktion überhaupt aufgerufen wird, und deaktiviert die Senden-Schaltfläche, während eine Anforderung im Flug ist. Sehen Sie den vollständigen Listener, die renderResult() und die formatError() in estimated-delivery.js.

Testen der vollständigen Schleife lokal

Wenn beide Dev-Server ausgeführt werden, öffnen Sie die unter http://localhost:3000/dev/branches/estimated-delivery erstellte Seite, senden Sie das Formular ab und bestätigen Sie, dass das Ergebnis mit den Daten aus den Upstream-Aufrufen der AEM Edge-Funktion als statusfarbene Karte gerendert wird.

Überprüfen Sie dann die beiden anderen Status:

Öffnen Sie die Browser-Konsole für eine dieser Optionen. Wenn eine Anfrage unerwartet fehlschlägt, überprüfen Sie zunächst, ob es sich um einen CORS-Fehler (Behebung in der AEM Edge-Funktion) oder einen Verbindungsfehler handelt (der Dev-Server der AEM Edge-Funktion wird nicht ausgeführt).

Nächste Schritte

In Bereitstellen und Überprüfen stellen Sie beide Projekte bereit und bestätigen, dass derselbe Fluss für Ihre Entwicklungs-Site, nicht nur lokal, funktioniert.

Zusätzliche Ressourcen