# JavaScript Runtime APIs - FetchEvent

### Como Funciona

FetchEvent consiste no evento que passa a request através da função *addEventListener*. A função *addEventListener*, por sua vez, define o gatilho para a execução do código JavaScript e receber os dados da requisição.

Quando o runtime da Azion recebe uma requisição HTTP, ele cria um `FetchEvent` e o entrega ao listener `fetch` que você registrou. O evento carrega o objeto `request` original, dando à sua função acesso à URL, ao método, aos headers e ao corpo do tráfego de entrada. Para produzir a resposta, você chama `event.respondWith()` com um `Response` ou uma promise que resolve em um, indicando ao runtime exatamente o que enviar de volta ao cliente. Esse padrão permite que uma function controle por completo cada ciclo de requisição e resposta.

### Sintaxe

`addEventListener(type, listener)`

### Propriedades

event.type: `fetch`

event.request: `request`  - a request HTTP recebida pela Function.

### Métodos

Quando a Function recebe a requisição, o Runtime executa o FetchEvent que poderá ser manipulado pelo eventListener do tipo `fetch` que, por sua vez, pode chamar o método que define o que vai ocorrer até a resposta:

`event.respondWith(response Request|Promise)` - a request HTTP recebida pela Function.

### Exemplo

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

## Casos de uso

- Ler a `request` recebida para rotear, filtrar ou transformar o tráfego na rede global da Azion.
- Retornar uma resposta personalizada ou sintetizada passando-a para `event.respondWith()`.
- Encaminhar a requisição a uma origem com `fetch()` e resolver a resposta de volta ao cliente.

## Recursos relacionados

- [FetchEvent na MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/FetchEvent)
- [Runtime APIs](/pt-br/documentacao/produtos/applications/functions/runtime-apis/javascript/fetch/)



---