Concrete Logo
Hamburger button

Usando Fetch API com o Fitch.js

  • Blog
  • 7 de Dezembro de 2016
Share

Estamos em um período no qual é muito comum usar um cliente HTTP para se comunicar com APIs no padrão REST. Por existirem muitas opções de bibliotecas, fica difícil escolher uma ideal para seu projeto. Com base nisso, vou tentar apresentar aqui mais uma, que talvez se torne a melhor escolha pra você =)

Fetch

Fetch é muito similar ao XMLHttpRequest, mas mais poderoso e mais simples de usar. Por estar presente em quase todos os browsers atuais, a aplicação é muito menos preocupante, mas dependendo de seu projeto vai ser necessário um polyfill para browsers antigos.

Veja um exemplo de GET, usando Fetch API:

Como podemos ver, seu uso é bem simples, mas pode ficar “verboso” caso tenhamos que fazer um request personalizado, como no caso abaixo:

Podemos ver que nesses dois exemplos temos verificações que se repetem e outras coisas que poderiam ser simplificadas. E é com essa ideia que surge o Fitch.js, que simplifica o uso do Fetch e ainda o torna disponível para browsers antigos e até para ser usado no Node.js.

Fitch.js

Para começar, vamos instalar o Fitch.js. Utilize um dos comandos abaixo:

Pronto, você já pode usar o Fitch.js em seu projeto.

Vejamos como ficaria o exemplo 1, usando nossa nova biblioteca:

Não é necessário verificar a resposta e nem transformar em json. O Fitch.js já faz isso por você, o que permite acabar com códigos duplicados.

Perceba que está explícito que é um request usando o método GET, o que facilita a leitura.

Com o exemplo 2, dá para perceber melhor a vantagem de usar:

Concluindo

O Fetch é uma ótima opção para a maioria das nossas aplicações. Mas podemos ver que o Fitch.js facilita muito o uso e nos permite ter um código mais legível, além de poder ser usado em browsers mais antigos e também em Node.js. Existem mais coisas que você pode fazer com o Fitch.js. Confira aquiAproveite para contribuir reportando os problemas que encontrar e até ajudando na documentação ou em novas features. 😉 Também deixe seu comentário abaixo. É sempre bom saber o que achou. Até a próxima!

É desenvolvedor front-end e quer trabalhar em um time ágil de verdade? Clique aqui.