FetchEvent

Download PDF
A FetchEvent object represents any incoming HTTP request event. Edge Functions processes HTTP requests by registering fetch event listeners.
Overview
In Edge Functions, use addEventListener to register a fetch event listener to generate an HTTP request event FetchEvent, thereby processing HTTP requests.
Note: 
 The FetchEvent object cannot be constructed directly. You can use addEventListener to register a fetch event listener to obtain the event object.
// `event` is the `FetchEvent` object.
addEventListener('fetch', (event) => {
  event.respondWith(new Response('hello world!'));
});
Attributes
ClientId
// event.clientId
readonly clientId: string;
The ClientId attribute specifies the ID allocated by Edge Functions for each request.
request
// event.request
readonly request: Request;
The request attribute specifies the HTTP request object initiated by the client. For more information, see Request.
Methods
respondWith
event.respondWith(response: Response | Promise<Response>): void;
Edge Functions takes over requests from the client and uses this method to return custom responses. 
Note: 
 In the fetch event callback of the addEventListener event listener, the event.respondWith() method is used to respond to the client. If this method is not invoked, Edge Functions forwards the current request back to the origin.
Parameters
Parameter
Type
Required
Description
response
Response          Promise<Response>      
Yes
        The response to the HTTP request of the client.      
waitUntil
event.waitUntil(task: Promise<any>): void;
The waitUntil() method is used to notify Edge Functions to wait until a Promise-based task is completed, extending the event processing lifecycle.
Parameters
Parameter
Type
Required
Description
task
Promise<Response>      
Yes
        The `Promise`-based task.       
passThroughOnException
event.passThroughOnException(): void;
The passThroughOnException() method is used to prevent runtime error responses. If the function code throws an unhandled exception, Edge Functions forwards the request back to the origin, enhancing the service availability.
Sample Code
If the event.respondWith method is not invoked, Edge Functions forwards the current request back to the origin.
function handleRequest(request) {
  return new Response('Edge Functions, Hello World!');
}
﻿
addEventListener('fetch', event => {
  const request = event.request;
  // If the request URL contains the string /ignore/, Edge Functions forwards the current request back to the origin.
  if (request.url.indexOf('/ignore/') !== -1) {
    // The event.respondWith method is not invoked.
    return;
  }
﻿
  // Customize content in the edge function to respond to the client.
  event.respondWith(handleRequest(request));
});
If the function code throws an unhandled exception, Edge Functions forwards the current request back to the origin.
addEventListener('fetch', event => {
  // If the function code throws an unhandled exception, Edge Functions forwards the current request back to the origin. 
  event.passThroughOnException();
  throw new Error('Throw error');
});
References
MDN documentation: FetchEvent
Sample Functions: Returning an HTML Page
Sample Functions: Using the Cache API
Parameter	Type	Required	Description
response	Response Promise<Response>	Yes	The response to the HTTP request of the client.