- Às vezes, você quer registrar logs quando o usuário navega para outra página ou envia um formulário
- Colocar um
fetch no evento de clique não garante que a requisição será enviada
- Então você pode tentar fazer o
fetch e depois navegar definindo window.location, mas isso também não é garantido
- Porque o XHR é assíncrono e não bloqueante
- Dá para usar
await com a Promise do fetch, mas isso também tem desvantagens
- O processamento fica mais lento e a experiência do usuário piora
- Não é tão confiável quanto parece. Não dá para lidar com casos como fechar a aba do navegador
- Existem várias opções para pedir ao navegador que preserve a requisição HTTP
- Ao usar a flag
keepalive no Fetch, a requisição é mantida mesmo que a página seja interrompida
- Uma função mais simples como
Navigator.sendBeacon()
- Os navegadores também oferecem suporte ao atributo
ping na tag a (a desvantagem é que só pode ser usado em links, e o Firefox não oferece suporte por padrão)
- Então, o que usar?
- Se possível, use
fetch() + keepalive
- Compatível com 80% dos navegadores
- Permite enviar cabeçalhos personalizados
- Também funciona com requisições GET
- Dá suporte a navegadores mais antigos
sendBeacon() é uma boa opção quando
- Compatível com 96% dos navegadores
- Você não precisa de muita customização
- Prefere uma API limpa e elegante
- Não quer disputar prioridade com outras requisições do navegador
Ainda não há comentários.