Conecte el bloque a la función Edge de AEM

Nuestro objetivo es crear un bloque de Edge Delivery Services dinámico que llame a una función de Edge de AEM para recuperar datos dinámicos de una API de terceros.

El tercer paso es conectar el bloque de Edge Delivery Services que creó en Desarrollo del bloque de Edge Delivery Services a la función de AEM Edge que creó en Desarrollo de la función de AEM Edge. Este es el paso que une los dos proyectos. Ejecute ambos servidores de desarrollo local uno al lado del otro, en dos puertos diferentes, y haga que la llamada JavaScript del bloque sea la correcta, dependiendo de dónde se esté ejecutando.

Ejecutar ambos servidores de desarrollo local

En el proyecto del sitio de Edge Delivery Services:

$ aem up

Esto sirve al sitio en http://localhost:3000.

En el proyecto Funciones de AEM Edge, en un segundo terminal:

$ aio aem edge-functions serve

Esto sirve al extremo en http://127.0.0.1:7676.

Conectar la llamada de recuperación

Agregue lo siguiente a estimated-delivery.js, junto con el andamio de Desarrollo del bloque Edge Delivery Services.

Elija la dirección URL correcta para el entorno

El bloque de Edge Delivery Services llama a una dirección URL diferente en función de dónde se esté ejecutando:

Detecte el desarrollo local del nombre de host que indica el explorador y almacene en caché el resultado para que cada solicitud no repita la comprobación:

// 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;
}

Esta es la única lógica específica del entorno en el bloque de Edge Delivery Services. Todo lo demás, la llamada de captura, el control de respuesta y el procesamiento, funcionan igual en ambos entornos porque la ruta es la misma; solo cambia el origen.

Llamar a la función Edge de AEM

// 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 lleva el mismo campo code de Defina el contrato de API (MISSING_POSTCODE, UNKNOWN_SKU), para que el llamador pueda bifurcarse en él. El bloque de Edge Delivery Services solo muestra message. cache: 'no-store' evita que el explorador almacene en caché una respuesta personalizada. El comportamiento de la propia caché de la CDN está controlado por separado por skipCache en cdn.yaml, y se trata en Generar un extremo de API.

Conectar el controlador de envío

Agregue esto dentro de decorate(), después del marcado del formulario de Desarrolle el bloque Edge Delivery Services. Este es el patrón principal: cancelar cualquier solicitud en vuelo, mostrar carga, llamar a la función y enrutar el resultado a setState:

// 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 ajusta renderResult(), lo que cambia entre el marcado de carga, el de error y el de éxito. Un error arrojado enruta a través de formatError(), lo que distingue un error de red (la función Edge de AEM no está accesible, por lo que el servidor de desarrollo local no se está ejecutando o la ruta de CDN aún no está implementada) de un error empresarial que la función Edge de AEM devolvió a propósito, por ejemplo, un SKU desconocido. El controlador completo también valida el código postal del lado del cliente antes de llamar a la función y deshabilita el botón de envío mientras se realiza una solicitud. Ver la escucha completa renderResult() y formatError() en estimated-delivery.js.

Prueba del bucle completo localmente

Con ambos servidores de desarrollo en ejecución, abra la página que creó en http://localhost:3000/dev/branches/estimated-delivery, envíe el formulario y confirme que el resultado se representa como una tarjeta de color de estado con datos de las llamadas de flujo ascendente de la función Edge de AEM.

A continuación, compruebe los otros dos estados:

Abra la consola del explorador para cualquiera de estos elementos. Si una solicitud falla inesperadamente, compruebe primero si es un error CORS (corregido en la función Edge de AEM) o un error de conexión (el servidor dev de la función Edge de AEM no se está ejecutando).

Próximos pasos

En Implementar y comprobar, se implementan ambos proyectos y se confirma que el mismo flujo funciona en el sitio de desarrollo, no solo localmente.

Recursos adicionales