fetch()

O novo AJAX

Leandro Parazito
GDG Pato Branco
1 min readMar 26, 2016

--

Hoje em dia, uma aplicação web Single Page Application, usa o objeto XMLHttpRequest para realizar o envio de solicitações HTTP. Ainda é possível atualizar partes da sua página sem dar refresh na página inteira!

Para realizar chamadas externas numa SPA, usamos AJAX. Basicamente, dessa forma:

Veja como o jQuery trata a complexidade do objeto XMLHttpRequest:

E no AngularJS:

Com o uso constante de frameworks Javasctipt modernos, como jQuery, AngularJS entre outros. Acabamos nos esquecendo que, por baixo dos panos, é dessa forma que os frameworks atuais acabam implementando as chamadas externas via AJAX, sem o efeito de recarregar a página a cada nova requisição ao servidor.

Com a introdução da função fetch (chamada de fetch API) no objeto global window, vamos poder fazer chamadas externas de uma forma muito mais simples e elegante. Dessa forma:

O primeiro parâmetro, que é obrigatório, informa o caminho para o recurso que você deseja consumir. O segundo, parâmetro opcional, é um objeto contendo opções da requisição. Retornando uma Promise para resolver a resposta daquela requisição, sendo ela de sucesso ou não.

A API fetch do Javascript é um substituto moderno para o tão famoso XMLHttpRequest (vulgo AJAX). A principal diferença é que a API fetch usa Promises, e é uma API simples e clara, evitando callback hell e ter que lembrar toda vez da complexa API do XMLHttpRequest.

O futuro é a web.

Referências:

--

--