# JavaScript Runtime APIs - FetchEvent

## 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

```js
  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:

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

## Example

```js
  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](https://developer.mozilla.org/en-US/docs/Web/API/FetchEvent)
- [Runtime APIs](/en/documentation/products/applications/functions/runtime-apis/javascript/fetch/)

For more information on [fetchEvent](https://developer.mozilla.org/en-US/docs/Web/API/FetchEvent) visit MDN Web Docs.