How it works

FetchEvent is the event that passes the request through the addEventListener function. The addEventListener, in turn, defines the trigger for executing the JavaScript code and receives the request data.

When the Azion runtime receives an HTTP request, it creates a FetchEvent and hands it to the fetch listener you registered. The event carries the original request object, giving your function access to the URL, method, headers, and body of the incoming traffic. To produce the answer, you call event.respondWith() with a Response or a promise that resolves to one, telling the runtime exactly what to send back to the client. This pattern lets a function fully control each request and response cycle.

Syntax

  addEventListener(type, listener)

Properties

event.type: fetch

event.request: request - the HTTP request received by the Function.

Methods

When the Function receives a request, the Runtime executes the FetchEvent, which can be manipulated by the eventListener of a fetch type that, in turn, can call the method that defines what will happen until the response:

event.respondWith(response Request|Promise) // the HTTP request received by the Function.

Example

  addEventListener("fetch", event => {
    event.respondWith(handleRequest(event))
  })

Use cases

• Reading the incoming request to route, filter, or transform traffic on Azion’s global network.
• Returning a custom or synthesized response by passing it to event.respondWith().
• Forwarding the request to an origin with fetch() and resolving the response back to the client.

Related resources

• FetchEvent on MDN Web Docs
• Runtime APIs

For more information on fetchEvent visit MDN Web Docs.